高德地图画多边形地理围栏并保存边界经纬度

在即时配送、共享单车等应用中，我们通常需要为目标划定地图的边界范围。在查阅了相关资料后发现高德地图早在多年前就已经有了相关的组件。这篇笔记在查阅了高德开放平台的相关API以及参阅了时间博客的一篇文章，链接地址：https://www.timeblog.cn/article/137.html

效果演示：

高德地图画多边形地理围栏并保存边界经纬度

这里主要用到的是高德的PolyEditor多边形编辑器，除此之外还可以画点、线、圆形、矩形。具体去高德开放平台查看即可。

参考源码：

  1. <html>
  2. <head>
  3.     <meta charset="utf-8">
  4.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  5.     <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
  6.     <title>编辑折线、多边形、圆</title>
  7.     <link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css"/>
  8.     <script src="https://webapi.amap.com/maps?v=1.4.4&key=你申请的KEY值&plugin=AMap.PolyEditor"></script>
  9.     <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
  10.     <script src="https://lib.sinaapp.com/js/jquery/2.2.4/jquery-2.2.4.min.js" type="text/javascript" charset="utf-8"></script>
  11.     <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
  12.     <style type="text/css" media="screen">
  13.         .button-group {position: absolute;top: 0px;right: 20px;font-size: 12px;padding: 10px;}
  14.     </style>
  15. </head>
  16. <body>
  17. <div id="container"></div>
  18. <div class="button-group">
  19.     <input type="button" class="button" value="区域编辑完成" onClick="closeEditPolygon();"/>
  20. </div>
  21. <script>
  22.     var storage = window.localStorage;
  23.     var editorTool, map = new AMap.Map("container", {
  24.         resizeEnable: true,
  25.         //center: [116.403322, 39.900255],//地图中心点
  26.         zoom: 13 //地图显示的缩放级别
  27.     });
  28.     var beginNum = 0;
  29.     var clickListener ;
  30.     var beginPoints;//存坐标的数组
  31.     var beginMarks ;
  32.     var polygonEditor;
  33.     var resPolygon = [];
  34.     var resNum = 0;
  35.     var editRegion = storage.getItem("FenceRegion");
  36.     init();
  37.     function init(){
  38.         beginPoints = [];
  39.         beginMarks = [];
  40.         beginNum = 0;
  41.         polygonEditor = '';
  43.         if(editRegion){
  44.             beginPoints = JsonToArray(editRegion);
  45.             console.log(beginPoints);
  46.             var polygon = createPolygon(beginPoints);
  47.             polygonEditor = createEditor(polygon);//如果是要不可编辑状态去掉此行
  48.         }else{
  49.             clickListener = AMap.event.addListener(map, "click", mapOnClick);
  50.         }
  51.     }
  53.     function mapOnClick(e) {
  54.         beginMarks.push(addMarker(e.lnglat));
  55.         console.log(e.lnglat);
  56.         beginPoints.push(e.lnglat);
  57.         beginNum++;
  58.         if(beginNum == 3){
  59.             AMap.event.removeListener(clickListener);
  60.             var polygon = createPolygon(beginPoints);
  61.             polygonEditor = createEditor(polygon);
  62.             clearMarks();
  63.         }
  64.     };
  66.     /*创建多边形*/
  67.     function createPolygon(arr){
  68.         var polygon = new AMap.Polygon({
  69.             map: map,
  70.             path: arr,
  71.             strokeColor: "#0000ff",
  72.             strokeOpacity: 1,
  73.             strokeWeight: 3,
  74.             fillColor: "#f5deb3",
  75.             fillOpacity: 0.35
  76.         });
  77.         return polygon;
  78.     }
  80.     function createEditor(polygon){
  81.         var polygonEditor = new AMap.PolyEditor(map, polygon);
  82.         polygonEditor.open();
  83.         AMap.event.addListener(polygonEditor,'end',polygonEnd);
  84.         return polygonEditor;
  85.     }
  87.     function closeEditPolygon(){
  88.         if(!polygonEditor){
  89.             console.log('未获取到地图');
  90.             return false;
  91.         }
  92.         //polygonEditor.close();//关闭编辑状态
  93.         var FenceRegion = [];
  94.         if(!beginPoints){
  95.             console.log('未获取到坐标');
  96.             return false;
  97.         }
  98.         beginPoints.forEach(function(item,index){
  99.             var lng = parseFloat(item['lng']);//经
  100.             var lat = parseFloat(item['lat']);//纬
  101.             FenceRegion.push([lng,lat]);
  102.         });
  103.         var newRegion = ObjectToJson(FenceRegion);
  104.         console.log(newRegion);
  105.         // [
  106.         //     {"lng":106.468742,"lat":29.543236},
  107.         //     {"lng":106.470115,"lat":29.522475},
  108.         //     {"lng":106.499298,"lat":29.533827}
  109.         // ]
  110.         /*给父页设置值*/
  111.         parent.$('input[name=fence_region]').val(newRegion);
  112.         storage.setItem("FenceRegion",newRegion);
  113.     }
  115.     function polygonEnd(res){
  116.         resPolygon.push(res.target);
  117.         alert(resPolygon[resNum].contains([116.386328, 39.913818]));
  118.         appendHideHtml(resNum,res.target.getPath());
  120.         resNum++;
  121.         init();
  122.     }
  124.     function appendHideHtml(index,arr){
  125.         var strify = JSON.stringify(arr);
  126.         var html = '<input type="hidden" id="index'+index+'" name="paths[]" value="'+strify+'">';
  127.         $('body').append(html);
  128.         console.log(html);
  129.     }
  131.     function clearMarks(){
  132.         map.remove(beginMarks);
  133.     }
  135.     function JsonToArray(json){
  136.         var arr = JSON.parse(json);
  137.         var res = [];
  138.         for (var i = 0; i < arr.length; i++) {
  139.             var line = [];
  140.             line.push(arr[i].lng);
  141.             line.push(arr[i].lat);
  142.             res.push(line);
  143.         };
  144.         return res;
  145.     }
  147.     // 实例化点标记
  148.     function addMarker(lnglat) {
  150.         var marker = new AMap.Marker({
  151.             icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
  152.             position: lnglat
  153.         });
  154.         marker.setMap(map);
  155.         return marker;
  156.     }
  158.     function ObjectToJson(arr){
  159.         if(!arr.length) return null;
  161.         var i = 0;
  162.         len = arr.length,
  163.             array = [];
  164.         for(;i<len;i++){
  165.             array.push({"lng":arr[i][0],"lat":arr[i][1]});
  166.         }
  167.         return JSON.stringify(array);
  168.     }
  169. </script>
  170. </body>
  171. </html>

地图边界范围选定后，上传后台保存即可。

 

你想把广告放到这里吗？

发表评论

您必须 登录 才能发表留言！