点击地图添加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）