高德地图：创建多个覆盖区域

最新推荐文章于 2024-09-17 01:48:52 发布

_木棠

最新推荐文章于 2024-09-17 01:48:52 发布

阅读量800

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/Ygaidi/article/details/128003047

版权

1.引用高德地图

<script src="https://cache.amap.com/lbs/static/es5.min.js"></script>
<script src="https://webapi.amap.com/maps?v=2.0&key=你的key值"></script>

2.html

<div class="map" id="container"></div>

3.创建地图

var map = new AMap.Map('container', {
    resizeEnable: true, //是否监控地图容器尺寸变化
    mapStyle: "amap://styles/whitesmoke",
    zoom: 14,
    center: [105.749415, 34.592315],
 });
 //数据输入格式;
 // 高风险区
 var data =[
             {
               id: 1,
               value: "105.724666, 34.584343; 105.733947, 34.582917;105.722797,34.594284"
             },
              {
                id: 2,
                value: "105.761565, 34.590881; 105.774152, 34.589692; 105.779265, 34.587315; 105.759265,34.587315"
               },
           ];
 // 中风险区
 // 低风险区
 //数据格式化;
                for (var j = 0; j < data.length; j++) {
                    var path = [];
                    var points = data[j].areaPosition.split(";");
                    var dataList = data[j]
                    for (var i = 0; i < points.length; i++) {
                        var point = points[i].split(",");
                        path.push(new AMap.LngLat(point[0], point[1]));
                    }

                    //循环遍历添加多边形;
                    addPolygon(path,dataList);
                }
//创建多边形-函数封装;====================高风险
                function addPolygon(path,dataList) {
                    // console.log(dataList,'params')
                    var polygon = new AMap.Polygon({
                        map: map,
                        path: path,
                        strokeColor: "red",
                        strokeWeight: 2,
                        strokeOpacity: 1,
                        fillOpacity: 0.3,
                        fillColor: 'red',
                        zIndex: 50,
                        content:dataList
                    });
                    //多边形覆盖物上点击显示窗体;
                    polygon.on('click', function (e,dataList) {
                        // console.log(e.target._opts.content,'params')
                        var mapAseData = e.target._opts.content
                        // 弹框
                        headMap(mapAseData)
                    });

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

var styleName = "amap://styles/darkblue";
console.log(styleName)
map.setMapStyle(styleName);



function headMap (mapAseData){
    // 内容
}

效果：