vue 中使用高德地图输入查询地址从附近开始显示

在Vue中使用高德地图，可以通过以下步骤实现输入查询地址从附近开始显示：

首先，在index.html文件中引入高德地图的API：

<script src="https://webapi.amap.com/maps?v=1.4.15&key=your_amap_key"></script>

其中，your_amap_key是你在高德地图开发者平台申请的API Key。

在Vue组件中，创建地图容器和输入框：

<template>
  <div>
    <input type="text" v-model="address" placeholder="输入地址">
    <div id="mapContainer"></div>
  </div>
</template>

在Vue的mounted生命周期钩子中，初始化地图并添加地图插件：

mounted() {
  // 初始化地图
  this.map = new AMap.Map('mapContainer', {
    zoom: 13, // 地图缩放级别
    center: [116.397428, 39.90923] // 地图中心点坐标
  });

  // 添加搜索插件
  AMap.plugin('AMap.PlaceSearch', () => {
    this.placeSearch = new AMap.PlaceSearch({
      map: this.map
    });
  });
}

监听地址输入框的变化，当输入框内容发生变化时进行搜索：

watch: {
  address(value) {
    if (value) {
      this.placeSearch.searchNearBy(value, this.map.getCenter());
    }
  }
}

这样，当输入框中的地址发生变化时，会在地图上显示附近的搜索结果