腾讯地图撒点并默认显示点位信息

实现步骤如下：

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(['自己的点位集合']);