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

多边形数据格式

    //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!