百度地图+谷歌地图 勾画 行政区块边界

时间  2020-07-09 标签 百度 地图 谷歌 地图 勾画 行政 区块 边界

最近公司作项目，须要用在谷歌地图上勾勒出搜索的行政区块的轮廓。javascript

因而在找各类资料......最后好像是有末尾CSDN的网友提供了思路，具体看正文。css


效果以下
html



先贴代码java

[html]  view plain copy
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  2. <html>  
  3.     <head>  
  4.         <title>demo.html</title>  
  5.   
  6.         <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">  
  7.         <meta http-equiv="description" content="this is my page">  
  8.         <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
  9.   
  10.     </head>  
  11.     <!--google-->  
  12.     <script type="text/javascript"  
  13.         src="https://maps.google.com/maps/api/js?sensor=false"></script>  
  14.     <!--baidu-->  
  15.     <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>  
  16.   
  17.   
  18.     <body onload="initialize();">  
  19.         <div id="map_canvas" style="width: 800px; height: 600px"></div>  
  20.   
  21.         <div id="show_x"></div>  
  22.         <!--显示X坐标-->  
  23.         <div id="show_y"></div>  
  24.         <!--显示Y坐标-->  
  25.         <div id="zoom"></div>  
  26.         <!--显示缩放级别-->  
  27.         <div id="message"></div>  
  28.   
  29.         输入省、直辖市或县名称：  
  30.         <input type="text" id="districtName" style="width: 80px" value="重庆市">  
  31.         <input type="button" onclick="getBoundary()" value="获取轮廓线">  
  32.     </body>  
  33.   
  34.     <script type="text/javascript">  
  35.     var map;  
  36.     function initialize() {  
  37.         var myLatLng = new google.maps.LatLng(37,  
  38.                 104);  
  39.         var myOptions = {  
  40.             zoom : 4,  
  41.             center : myLatLng,  
  42.             mapTypeId : google.maps.MapTypeId.TERRAIN  
  43.         };  
  44.   
  45.         var bermudaTriangle;  
  46.   
  47.         map = new google.maps.Map(document.getElementById("map_canvas"),  
  48.                 myOptions);  
  49.   
  50.     }  
  51.   
  52.     function test() {  
  53.   
  54.     }  
  55.   
  56.     function getBoundary() {  
  57.         var bdary = new BMap.Boundary();  
  58.         var name = document.getElementById("districtName").value;  
  59.         //多边形定义  
  60.           
  61.         bdary.get(name, function(rs) {  
  62.             points = rs; //获取行政区域  
  63.             var rslength = rs.boundaries.length;  
  64.             var top=0;//大  
  65.             var bottom=0;//小  
  66.             var left=0;//小  
  67.             var right=0;//大  
  68.             for (i = 0; i < rslength; i++) {  
  69.                 var triangleCoords = [];  
  70.                 var temp = rs.boundaries[i];  
  71.                 var latLngs = temp.split(";");  
  72.                 for (j = 1; j < latLngs.length - 1; j++) {  
  73.                     var postion = latLngs[j].indexOf(",");  
  74.                     var lat = parseFloat(latLngs[j].substr(0, postion));//经度  
  75.                     var lng = parseFloat(latLngs[j].substr(postion + 1));//纬度  
  76.                     //加入经纬度  
  77.                     triangleCoords.push(new google.maps.LatLng(lng, lat));  
  78.                     //活动最大，最小经纬度。计算地图中心点  
  79.                     if(j==1&&top==0&&bottom==0&&left==0&&right==0){  
  80.                         top=lng;  
  81.                         bottom=lng;  
  82.                         left=lat;  
  83.                         right=lat;  
  84.                     }else{  
  85.                         if(lng>top){  
  86.                             top=lng;  
  87.                         }  
  88.                         if(lng<bottom){  
  89.                             bottom=lng;  
  90.                         }  
  91.                         if(lat>right){  
  92.                             right=lat;  
  93.                         }  
  94.                         if(lat<left){  
  95.                             left=lat;  
  96.                         }  
  97.                     }  
  98.                       
  99.                 }  
  100.                 bermudaTriangle = new google.maps.Polygon({  
  101.                     paths : triangleCoords,  
  102.                     strokeColor : "#FF0000",  
  103.                     strokeOpacity : 0.8,  
  104.                     strokeWeight : 2,  
  105.                     fillColor : "#FF0000",  
  106.                     fillOpacity : 0.35  
  107.                 });  
  108.                 bermudaTriangle.setMap(map);  
  109.             }  
  110.             map.setCenter(new google.maps.LatLng(bottom+((top-bottom)/2),left+((right-left)/2)));  
  111.             map.setZoom(7);  
  112.   
  113.         });  
  114.   
  115.     }  
  116. </script>  
  117. </html>  

接着一步一步的看。

第一步：导入谷歌和百度的JS库canvas

[html]  view plain copy
  1. <!--google-->  
  2.     <script type="text/javascript"  
  3.         src="https://maps.google.com/maps/api/js?sensor=false"></script>  
  4.     <!--baidu-->  
  5.     <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.3"></script>  

第二步：从百度地图拿到坐标点。其中的rs变量内存的就是坐标集合。

[html]  view plain copy
  1. var bdary = new BMap.Boundary();  
  2.         var name = document.getElementById("districtName").value;  
  3.         //多边形定义  
  4.           
  5.         bdary.get(name, function(rs) {  
  6.             points = rs; //获取行政区域  
第三步：解析整理。

[html]  view plain copy
  1. points = rs; //获取行政区域  
  2.             var rslength = rs.boundaries.length;  
  3.             var top=0;//大  
  4.             var bottom=0;//小  
  5.             var left=0;//小  
  6.             var right=0;//大  
  7.             for (i = 0; i < rslength; i++) {  
  8.                 var triangleCoords = [];  
  9.                 var temp = rs.boundaries[i];  
  10.                 var latLngs = temp.split(";");  
  11.                 for (j = 1; j < latLngs.length - 1; j++) {  
  12.                     var postion = latLngs[j].indexOf(",");  
  13.                     var lat = parseFloat(latLngs[j].substr(0, postion));//经度  
  14.                     var lng = parseFloat(latLngs[j].substr(postion + 1));//纬度  

第四部：用整理过的数据在谷歌地图上绘制多边形。（坐标有一点误差）

[css]  view plain copy
  1. bermudaTriangle = new google.maps.Polygon({  
  2.     paths : triangleCoords,  
  3.     strokeColor : "#FF0000",  
  4.     strokeOpacity : 0.8,  
  5.     strokeWeight : 2,  
  6.     fillColor : "#FF0000",  
  7.     fillOpacity : 0.35  
  8. });  
  9. bermudaTriangle.setMap(map);  

第五步：计算中心点坐标。

[javascript]  view plain copy
  1. //加入经纬度  
  2.                     triangleCoords.push(new google.maps.LatLng(lng, lat));  
  3.                     //活动最大，最小经纬度。计算地图中心点  
  4.                     if(j==1&&top==0&&bottom==0&&left==0&&right==0){  
  5.                         top=lng;  
  6.                         bottom=lng;  
  7.                         left=lat;  
  8.                         right=lat;  
  9.                     }else{  
  10.                         if(lng>top){  
  11.                             top=lng;  
  12.                         }  
  13.                         if(lng<bottom){  
  14.                             bottom=lng;  
  15.                         }  
  16.                         if(lat>right){  
  17.                             right=lat;  
  18.                         }  
  19.                         if(lat<left){  
  20.                             left=lat;  
  21.                         }  
  22.                     }  
联系我们 沪ICP备2021010478号-7