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

原创已于 2024-02-27 15:08:00 修改 · 1k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

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

文章介绍了如何在JavaScript中使用AMapAPI创建一个多边形区域，通过`addHousePolygon`方法根据经纬度坐标数据动态添加，并实现鼠标移入和移出时的透明度和颜色变化。

我这里是写到了一个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)
    }

网格效果如下：