前端 如何在vue2里面实现输入提示后查询高德地图功能

在Vue2中实现输入提示后查询高德地图功能可以分为以下几个步骤：

1. 引入高德地图的 JavaScript API 和相关插件。可以通过在 index.html 中引入以下代码：

   <script src="https://webapi.amap.com/maps?v=1.4.15&key=你的key"></script>
   <script src="https://webapi.amap.com/ui/1.0/main.js"></script>

其中，`key` 是你的高德地图开发者账号的 key。

2. 在需要使用地图的组件中，初始化地图对象并绑定到页面上。可以使用以下代码：

   mounted() {
     this.initMap();
   },
   methods: {
     initMap() {
       AMapUI.loadUI(['misc/PoiPicker'], PoiPicker => {
         const poiPicker = new PoiPicker({
           input: 'tipinput'
         });
         poiPicker.on('poiPicked', poiResult => {
           this.searchResult = poiResult;
         });
       });
     }
   }

上述代码中，`AMapUI.loadUI()` 方法会异步加载 PoiPicker 插件，并在加载完成后执行回调函数。在回调函数中，我们可以创建 PoiPicker 对象，并将其绑定到页面上。`input` 参数指定了用于输入提示的输入框的 ID。当用户从输入提示列表中选择一个地点时，`poiPicked` 事件会被触发，我们可以在事件处理函数中获取用户选择的地点信息。

3. 在输入框中启用输入提示功能。可以使用以下代码：

   <input id="tipinput" type="text" placeholder="请输入关键字" />

上述代码中，`id` 属性必须与 PoiPicker 构造函数中的 `input` 参数相同。

4. 在用户输入关键字时，触发输入提示功能。可以使用以下代码：

   watch: {
     keyword(value) {
       if (!value) {
         return;
       }
       AMap.plugin('AMap.Autocomplete', () => {
         const autoComplete = new AMap.Autocomplete({
           city: '全国'
         });
         autoComplete.search(value, (status, result) => {
           if (status === 'complete') {
             const tips = result.tips.map(tip => tip.name);
             this.tipList = tips;
           }
         });
       });
     }
   }

上述代码中，我们使用了 Vue2 中的 `watch` 方法监听输入框的值变化。当用户输入一个非空字符串时，我们会异步加载 Autocomplete 插件，并在加载完成后执行回调函数。在回调函数中，我们可以创建 Autocomplete 对象，并使用 `search()` 方法搜索用户输入的关键字。当搜索完成后，我们可以从返回的结果中获取输入提示列表，将其保存到 Vue 实例的 `tipList` 属性中。在页面中，我们可以使用 v-for 指令渲染 `tipList` 属性中的所有提示项。

上述代码仅是一个简单的示例，实际情况可能更复杂。如果需要更详细的代码示例，可以参考高德地图官方文档。