高德地图如何给指定区域添加网格

云村深处

已于 2024-02-27 15:08:00 修改

阅读量547

点赞数 8

文章标签： javascript

于 2024-01-25 10:18:03 首次发布

本文链接：https://blog.csdn.net/Glimpse_L/article/details/135837669

版权

我这里是写到了一个addHousePolygon方法内，以便添加多个区域，具体情况因人而异。

//houseAreaData为指定区域的经纬度坐标
const houseAreaData= [[经度,纬度],[经度,纬度],....[经度,纬度]]
function addHousePolygon(houseAreaData) {
      var polygon = new AMap.Polygon({
        path: houseAreaData,
        //多边形的填充颜色为淡灰色
        fillColor: '#97FFFF',
        //设置多边形边框的透明度
        strokeOpacity: 1,
        //设置多边形填充颜色的透明度
        fillOpacity: 0.4,
        //设置多边形边框的颜色为蓝色
        strokeColor: '#3399ff',
        //设置多边形边框的宽度
        strokeWeight: 2,
        //设置多边形边框的样式为虚线
        strokeStyle: 'dashed',
        //设置多边形边框虚线的长度和间距
        strokeDasharray: [15, 5]
      });
        //鼠标移入调用方法
      polygon.on('mouseover', () => {
        polygon.setOptions({
          fillOpacity: 0.6,
          fillColor: '#33ccff'
        })
      })
        //鼠标移出调用方法
      polygon.on('mouseout', () => {
        polygon.setOptions({
          fillOpacity: 0.4,
          fillColor: '#97FFFF'
        })
      })
      map.add(polygon)
    }

网格效果如下：