高德地图点标记

效果图
图片: 在这里插入图片描述

var = [{x:106.521392,y:29.573258,name:'测试',address:'测试地址'},
{x:106.54852,y:29.534435,name:'测试',address:'测试地址'},
{x:106.54852,y:29.543988,name:'测试',address:'测试地址'},]
datalabel.map((item)=>{
                    var startIcon = new AMap.Icon({
                        // 图标尺寸
                        size: new AMap.Size(32, 32),
                        // 图标的取图地址
                        image: "../img/house.png",
                        // 图标所用图片大小
                        imageSize: new AMap.Size(32, 32),
                        // 图标取图偏移量
                        imageOffset: new AMap.Pixel(0, 0)
                      });
                    var markers = [
                        {
                            icon: startIcon,
                            position: [item.x, item.y],
                            
                        },
                    ];
                    // 添加一些分布不均的点到地图上,地图上添加三个点标记，作为参照
                    markers.forEach(function(marker1) {
                        var marker =new AMap.Marker({
                        map: map,
                        icon: marker1.icon,
                        position: [marker1.position[0], marker1.position[1]],
                        offset: new AMap.Pixel(0, 0),
                        label: { content:  `
                            <div class="label-text">
                                <div class="one">${item.name}</div>
                                <div class="two">详细地址：${item.address}</div>
                            </div>
                            `,
                            direction: 'right' //文本标注方位 可选值：'top'|'right'|'bottom'|'left'|'center'，默认值: 'right' 
                            }
                        });
                        // 鼠标移入移出
                        marker.on('mouseover',()=>{
                            map.add(markers);
                        })
                        marker.on('mouseout',()=>{
                            map.remove(markers);
                        })
                        //添加点击事件
                        marker.setExtData(marker1.extData)//添加marker 的自定义属性
                    });
                })

海量点标记，鼠标移入标记显示弹窗

var layer = new AMap.LabelsLayer({
                    zooms: [3, 20],
                    zIndex: 1000,
                    collision: false
                });
                // 将图层添加到地图
                map.add(layer);

                var markers = [];
                var icon = {
                    type: 'image',
                    image: '../img/house.png',
                    size: [32, 32],
                    anchor: 'bottom-center',
                };
                datalabel.forEach((item) => {
                    var curData = {
                        position: [item.x,item.y],
                        icon
                    };
        
                    var labelMarker = new AMap.LabelMarker(curData);
        
                    markers.push(labelMarker);
        
                    // 给marker绑定事件
                    labelMarker.on('mouseover', function (e) {
                        var datalabel = e.data.data && e.data.data.position;
        
                        if(datalabel){
                            normalMarker.setContent(`
                                        <div class="label-text">
                                            <div class="one">${item.name}</div>
                                            <div class="two">详细地址：${item.address}</div>
                                        </div>
                                        `);
                            normalMarker.setPosition(datalabel);
                            map.add(normalMarker);
                        }
                    });
        
                    labelMarker.on('mouseout', function(){
                        map.remove(normalMarker);
                    });
                })
                // 一次性将海量点添加到图层
                layer.add(markers);

                // 普通点
                var normalMarker = new AMap.Marker({
                    anchor: 'bottom-center',
                    offset: [0, -15],
                });