vue+高德地图写地图选址组件的方法

上面是说的放弃了搜索，这里是说如果搜索到了我们想要的结果，那我们会去点击我们想要的结果：

//这里我们遍历search_list的时候将location传进来
onSearchLi(location){
  this.center = [location.lng,location.lat];
  this.adMap();
  this.search_key = '';
},

这里的步骤是：
1.先给this.center赋值，这里注意纬度在前，经度在后！
2.调取上面的this.adMap()查询一次新的lists；
3.清空search_key，清空search_key后搜索列表就会自动隐藏了，另外因为我们用watch监控了search_key ，所以在这里清空search_key 的同时也会清空search_list并将noSearchShow设为false。

这里基本上就差不多完成了，还有就是最后一步，我们点击地址列表的时候获取地址信息：

//html
<li v-for="(item, index) in lists" :key="index" @click="onResLi(item)">
       <span>{{item.name}}</span>
       <p>{{item.address}}</p>
</li>
//js
onResLi(e){
   console.log(e)
}

这里e打印出来就是选择的地点信息。
在这里我们组件就完成了，另外可能还需要一个回到当前位置的方法，我说下思路，就不在写出来了：
1.在地图上写一个图标，给一个点击事件；
2.点击的时候使用高德的定位方法获取当前位置的坐标，然后赋值给this.center；
3.再调一次adMap()方法就会回到当前位置了。

欢迎大佬批评指正优化，小弟献丑了~

以上所述是小编给大家介绍的vue+高德地图写地图选址组件的方法详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持！