高德地图进阶开发实战案例(3):标注、信息弹窗和清除覆盖物

最新推荐文章于 2023-03-18 15:12:10 发布

漏刻有时

最新推荐文章于 2023-03-18 15:12:10 发布

阅读量525

点赞数

分类专栏：地图开发

LOCKDATAV出品，为避免断章取义走弯路，请注意环境配置和时间。

本文链接：https://blog.csdn.net/weixin_41290949/article/details/116175560

版权

地图开发专栏收录该内容

143 篇文章 30 订阅

订阅专栏

在这里插入图片描述

 var map = new AMap.Map("container", {resizeEnable: true});
    var lnglats = [
        [116.368904, 39.923423],
        [116.382122, 39.921176],
        [116.387271, 39.922501],
        [116.398258, 39.914600]
    ];

    var infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)});

    var markers = [];//标注点信息集合
    for (var i = 0, marker; i < lnglats.length; i++) {
        var marker = new AMap.Marker({
            position: lnglats[i],
            map: map
        });
        marker.content = '我是第' + (i + 1) + '个Marker';
        marker.on('click', markerClick);
        // marker.emit('click', {target: marker});
        markers.push(marker);
    }

    function markerClick(e) {
        infoWindow.setContent(e.target.content);
        infoWindow.open(map, e.target.getPosition());
    }
    map.setFitView();

    // 创建覆盖物群组，并将 marker 传给 OverlayGroup
    var overlayGroups = new AMap.OverlayGroup(markers);

    //清除标注;
    function clearMaker() {
        map.remove(markers)
        markers = [];
    }

    //清除覆盖物;
    document.getElementById('btn').onclick = function () {
        clearMaker();
    }