vue-amap 地图选点功能

最近遇到一个地图相关需求,要求用户在地图上点击选择地点,地点可搜索,选择后带出坐标及具体位置,点标记只有一个,随着鼠标点击的位置定位,这里选择使用vue-amap来实现,上手较快,实现效果如如下:

vue-amap 地图选点功能_第1张图片
image.png

安装及上手就不赘述了,参考vue-amap文档
这里别忘了先去高德地图官网申请一个开发用的key

这里我是用弹窗组件的方式引入的,部分代码用到了elementUI,可以适当改动,直接上代码,组件如下:






父组件直接引入此组件:

  

至此地图选点就实现了,之后更新地图显示坐标及信息窗口的文章。

你可能感兴趣的:(vue-amap 地图选点功能)