vue-amap高德地图显示点标记及相应的信息窗体实现

我的需求为,现在地图上根据坐标显示点标记,当鼠标移到点标记上时,动态的在选择的点标记旁边弹出相应的信息小弹框,同时小弹框中有可以点击的按钮,点击地图其他地方时关闭信息窗体,实现效果如下:


vue-amap高德地图显示点标记及相应的信息窗体实现_第1张图片
image.png

安装及上手就不赘述了,参考vue-amap文档
大概思路为,遍历接口信息,将坐标push进点标记列表中,同时将信息窗体push进来,位置为点标记的位置适当偏移,新版本el-amap-info-window中可以写内部的content及样式,省去字符串拼接的麻烦,代码:






你可能感兴趣的:(vue-amap高德地图显示点标记及相应的信息窗体实现)