高德地图通过点连成区域

最新推荐文章于 2025-07-11 11:50:49 发布

sabo-_-

最新推荐文章于 2025-07-11 11:50:49 发布

阅读量5.3k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_41129148/article/details/93638338

最近要用高德地图做一个需求，通过在地图进行标记，然后根据标记圈出一块区域。我的思路是先把每次点击marker的坐标存入一个数组，再用数组里面的坐标生成一个多边形。（每次生成多边形要把上个清除掉，不然多边形会相互覆盖。）

先上效果图：

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
  <title>点生成区域</title>
  <link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css" />
  <script src="http://webapi.amap.com/maps?v=1.3&key=您申请的key值"></script>
  <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
</head>

<body>
  <div id="container"></div>
  <script>
    let map = new AMap.Map('container', {
      zoom: 13,//级别
      center: [116.397428, 39.90923]
      // viewMode: '3D'//使用3D视图
    });
    let polygon;//定义多边形
    let lnglatArr = [];//多边形需要的数据
    function showInfoClick(e) {
      lnglatArr.push(e.lnglat); //每次点击把坐标存下
      // 创建一个 Marker 实例：
      console.log(lnglatArr);
      let marker = new AMap.Marker({
        position: new AMap.LngLat(e.lnglat.lng, e.lnglat.lat) // 经纬度对象
      });
      // 将创建的点标记添加到已有的地图实例：
      map.add(marker);
      //每次新建多边形前先把之前的删掉，避免覆盖。
      if (lnglatArr.length > 1) {
        map.remove(polygon);
      }
      polygon = new AMap.Polygon({
        path: lnglatArr,//多边形坐标
        strokeColor: '#A0CFF6',//线颜色
        strokeWeight: 1,
        strokeOpacity: 1,//线透明度
        fillOpacity: 0.4,//填充透明度
        fillColor: '#1791fc',//填充颜色
        zIndex: 50
      });
      map.add(polygon); //生成多边形
    }
    map.on('click', showInfoClick);//点击划图
    map.setFitView();//根据地图上添加的覆盖物分布情况，自动缩放地图到合适的视野级别
  </script>
</body>

</html>

如果是不需要marker点只需要能画出一片区域的话，可以直接看官方这个案例。

https://lbs.amap.com/api/javascript-api/example/mouse-operate-map/mouse-draw-overlayers

效果图：