高德地图进阶开发实战案例(8):加载多个多边形的覆盖物且实现鼠标高亮和单击事件解决方案__高德地图绘制多边形

link之家

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

相关文章推荐

千杯不醉的烤面包 · 国家金融监督管理总局上海监管局、上海市医疗保 ...· 1 月前 ·

玉树临风的口罩 · 网易云音乐推出《中国新说唱2020》“意难平 ...· 4 月前 ·

强悍的斑马 · 木偶漫画又一部灵异漫画——《幽冥诡匠》_网易订阅· 1 年前 ·

发呆的生姜 · 统信uos和深度deepin哪个好 - 抖音· 2 年前 ·

安静的手套 · 新世代全顺和金龙龙耀6的区别买哪个好-易车· 2 年前 ·

多边形数据格式

//ajax数据输入格式;
    var data = [
        {
            id: 1,
            value: "121.546266,29.80975;121.54543,29.806845;121.548713,29.806752;121.549957,29.809508"
        },
        {
            id: 2,
            value: "121.549996,29.809229;121.549202,29.806818;121.55183,29.806315;121.552689,29.808615"
        },
        {
            id: 3,
            value: "121.548172,29.802794;121.548065,29.800745;121.5527,29.800494;121.552174,29.802068"
        },
        {
            id: 4,
            value: "121.548698,29.8054;121.548215,29.803166;121.550811,29.802701;121.550843,29.804786;121.549577,29.80419;121.549577,29.80419"
        }
    ];

初始化地图

//初始化地图对象，加载地图
    var map = new AMap.Map("container", {
        center: [121.548181, 29.806906],
        zoom: 15,
        resizeEnable: true,
    });

数据格式化

//数据格式化;
    for (var j = 0; j < data.length; j++) {
        var path = [];
        var points = data[j].value.split(";");
        for (var i = 0; i < points.length; i++) {
            var point = points[i].split(",");
            path.push(new AMap.LngLat(point[0], point[1]));
        }

        //循环遍历添加多边形;
        addPolygon(path);
    }

创建多边形

//创建多边形-函数封装;
    function addPolygon(path) {
        var polygon = new AMap.Polygon({
            map: map,
            path: path,
            strokeColor: "#1E9FFF",
            strokeWeight: 2,
            strokeStyle: 'dashed',
            strokeOpacity: 1,
            fillOpacity: 0.1,
            fillColor: '#1E9FFF',
            zIndex: 50,
        });

        //多边形覆盖物上点击显示窗体;
        polygon.on('click', function (e) {
            openInfo(e.lnglat);
        });

        //鼠标高亮效果
        polygon.on('mouseover', function (e) {
            polygon.setOptions({
                fillColor: '#FFB800',
            })
        });

        polygon.on('mouseout', function (e) {
            polygon.setOptions({
                fillColor: '#1E9FFF',
            })
        });
    }

lockdatav Done!