实现步骤如下：
1、注册腾讯位置服务账号并获取 Key
2、需要创建一个地图容器，并使用腾讯地图的 API 初始化地图。通常涉及到设置地图的中心点、缩放级别和地图样式。
map = new TMap.Map(document.getElementById(‘container’), {
center: center,
zoom: 15,
});
3、 创建标注点图层信息，地图对象，样式，点位数组等
var marker = new TMap.MultiMarker({
map: map,
//styles可定义多个样式，根据点位显示不同样式
styles: {},
geometries: []
4、事件监听根据需要添加对应的事件监听
marker.on(“mouseover”, function (evt) { }
点击事件（click）：当用户点击标注点时触发。
鼠标悬停事件（mouseover）：当鼠标悬停在标注点上时触发。
鼠标移出事件（mouseout）：当鼠标从标注点上移出时触发。
拖动开始事件（dragstart）：当开始拖动标注点时触发。
拖动进行事件（dragging）：当拖动标注点时持续触发。
拖动结束事件（dragend）：当拖动标注点结束时触发。
右键点击事件（rightclick）：当用户在标注点上右键点击时触发
5、封装标注点的数据数组，首先了解geometries的数组中的对象属性都有哪些？
id：点图形数据的标志信息，不可重复。如果id重复，后面的id会被重新分配一个新id，如果没有id会随机生成一个。
styleId：对应于 MultiMarkerStyleHash 中的样式id。
position：标注点的位置，类型为 LatLng。如：new TMap.LatLng(parseFloat(position.lat), parseFloat(position.lng))
rank：标注点的图层内绘制顺序。
properties：标注点的属性数据，类型为 Object，可根据自己需求定义属性
6、撒点
代码如下
<div id="container" style="width: 100%;height: 600px;"></div>
<script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&libraries=service&key=XXXXXXXXX"></script> //初始化地图组件var map, infoWindow,markers = [];// 设定中心点坐标var center = new TMap.LatLng(parseFloat([[${center.lat}]]), parseFloat([[${center.lng}]]));map = new TMap.Map(document.getElementById('container'), {center: center,zoom: 15,});// 地图全局事件// map.on("click", function(evt) {// // 这里是通过获取地图点击的位置，将该位置移动至中心点// map.setCenter(new TMap.LatLng(evt.latLng.getLat().toFixed(6), evt.latLng.getLng().toFixed(6)))// })// //移除控件缩放// map.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ZOOM);// // 移除比例尺控件// map.removeControl(TMap.constants.DEFAULT_CONTROL_ID.SCALE);// // 移除旋转控件// map.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ROTATION);//撒点函数function dropMarker(position) {console.log(position)var marker = new TMap.MultiMarker({map: map,//样式定义styles: {//创建一个styleId为"myStyle1"的样式myStyle1: new TMap.MarkerStyle({"width": 50,"height": 50,"src": '/screen/images/aa-icon.png',"anchor": { x: 25, y: 25 }}),myStyle2: new TMap.MarkerStyle({"width": 50,"height": 50,"src": '/screen/images/dd-icon.png',"anchor": { x: 25, y: 25 }})},//多个标注点的数据数组geometries: position});//给每个点位创建信息框并默认打开var infoWindows = [];for (var i = 0; i < marker.getGeometries().length; i++) {var infoWindow1 = new TMap.InfoWindow({map: map,position: marker.getGeometries()[i].position,content: '<p style="font-weight: bold;font-size: 13px;color: #000; white-space: nowrap;">'+marker.getGeometries()[i].properties.title+' ****：'+marker.getGeometries()[i].properties.num+'</p>', // 设置信息窗口内容autoClose: true});infoWindows.push(infoWindow1);infoWindow1.open(); // 打开信息窗口}markers.push(marker);//事件监听// marker.on("mouseover", function (evt) {// console.log(evt.latLng)// });}//撒点参数封装function addMarkers(positions) {var arrPOstions=[];var i=0;positions.forEach(function(position) {i++;arrPOstions.push({id: position.dbId,styleId: 'myStyle1', //这个用来区分显示不同的图标position: new TMap.LatLng(parseFloat(position.lat), parseFloat(position.lng)),properties: { //附带信息title: position.title,address: position.address,num:position.num}})});dropMarker(arrPOstions);}
addMarkers(['自己的点位集合']);
