高德地图通过点连成区域

最近要用高德地图做一个需求,通过在地图进行标记,然后根据标记圈出一块区域。我的思路是先把每次点击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

效果图:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值