跨日期线绘制

通过LngLat的第三个参数可以使经纬度延伸到 [-180, 180] 区间之外，可解决跨日期限的绘制问题

源代码编辑器

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>跨日期线的覆盖物绘制</title>
    <style>
    html,
    body,
    #container {
      width: 100%;
      height: 100%;
    }
    </style>
  </head>
  <body>
    <div id="container" tabindex="0"></div>
    <script src="https://webapi.amap.com/maps?v=2.0&key=您申请的key值"></script> 
    <script type="text/javascript">
    // 此处添加示例js代码
     var map = new AMap.Map('container',{ 
         zoom:3,
         center:[180,40] ,
         viewMode:'3D', 
    });
    var arr = []; //经纬度坐标数组  
    arr.push(new AMap.LngLat("116.39", "39.9",true));
    arr.push(new AMap.LngLat("238.25","37.48",true));

    var polyline = new AMap.Polyline({
        path:arr,
        geodesic:true,
        lineJoin:'round',
        showDir:true,
        dirColor:'white',
        strokeColor:'#29b6f6',
        outlineColor:'white',
        isOutline:true,
        strokeWeight:6.0
    });
    var circle = new AMap.Circle({
        center:arr[0],
        fillColor:'#81d4fa',
        strokeColor:'white',
        radius:100000//m
    })
    var circleMarker = new AMap.CircleMarker({
        center:arr[1],
        fillColor:'#80d8ff',
        strokeColor:'white',
        radius:20//px
    })
    
    var arr = []; //经纬度坐标数组  
    arr.push(new AMap.LngLat("126.39", "27.48",true));
    arr.push(new AMap.LngLat("238.25","27.48",true));
    arr.push(new AMap.LngLat("228.25","37.48",true));
    arr.push(new AMap.LngLat("116.39","37.48",true));

    var polygon = new AMap.Polygon({
        path:arr,
        fillColor:'#0277bd',
        zIndex:80,
        strokeColor:'white',
        });
    map.add([polyline,polygon,circle,circleMarker])
    </script>
   

  </body>
</html>

控制台

清空

返回顶部示例中心常见问题智能客服公众号
二维码