点击地图添加Marker

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了点击地图添加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）

以上是关于点击地图添加Marker的主要内容，如果未能解决你的问题，请参考以下文章