vue-amap为marker添加点击事件没反应

Posted 2023-03-24

参考技术A 在实现vue-amap为marker添加点击事件时，点击事件没反应
添加点击事件参考的文章是：
https://blog.csdn.net/weixin_45799605/article/details/103110441
按照作者的方法，无法出现响应事件
后来更改了版本号就能实现了（我也不清楚具体问题是不是在这）
我原先的版本号是2.0，不能响应点击事件
把版本改成1.4.4是成功的

点击地图添加Marker

1 问题描述

当我们往地图上添加marker时第一反应都是根据经度和维度来添加，却没有想到可以通过点击地图相应的位置添加marker，所以到底如何实现点击添加marker呢？

2 算法描述

首先引用script标签，type属性指明是JavaScript，并且设置地图中心点坐标的经度纬度，初始化地图设置相关的缩放级别，缩放级别大小自己可以尝试输入一些不同的值，看看自己所需要的值。

var center = new TMap.LatLng(30.576777,104.275435);    var map = new TMap.Map("container",      zoom: 16, //设置地图缩放级别      center: center //设置地图中心点坐标    );

其次初始化地图，这些代码都是Javascript里面的，所以var是创建变量，为TMap.MultiMarker创建名为markerLayer，然后添加id和map。

var markerLayer = new TMap.MultiMarker( id: 'marker-layer',        map: map );

最后监听点击事件实现点击添加marker，就会引用上面创建的变量名，最后就可以实现点击地图的某一个点而添加一个marker。

map.on("click", (evt) => markerLayer.add(            position: evt.latLng        );                          );

最后就可以顺利完成点击地图添加marker。

3 结语

在实现点击地图添加marker时需要注意代码的完整性，少了一行可能就会导致结果出错。目前未能解决的是对点击添加的marker样式改变，后面会继续跟进。

实习编辑：衡辉

稿件来源：深度学习与文旅应用实验室（DLETA）