實現思路:
1.利用高德地圖行政區域API獲得坐標列表
2.將坐標列表繪制在谷歌地圖上【因為高德地圖和國內的谷歌地圖都是采用GCJ02坐標系,所有誤差很小,可以不進行坐標誤差轉換】
注意點:
1.用百度地圖的API來繪制行政區域,不太准確,很不推薦。(1)百度地圖查詢行政區域本身不准確,有的地方本來應該屬於該區,被划分到其他區了(2)即使要用百度api,也要注意轉換坐標,因為百度,谷歌坐標系不同。貼段轉換代碼
var x_pi = Math.PI * 3000.0 / 180.0; //將 BD-09 坐標轉換成 GCJ-02 坐標(例如:百度坐標-->谷歌坐標) function bd_decrypt(bd_lat, bd_lon) { var x = bd_lon - 0.0065, y = bd_lat - 0.006; var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi); var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi); var gg_lon = z * Math.cos(theta); var gg_lat = z * Math.sin(theta); var result = {}; result.gg_lon = gg_lon;//緯度 result.gg_lat = gg_lat;//經度 return result; }
2.高德地圖API文檔寫的很好,推薦使用高德地圖
不完美的地方:
1.高德地圖API提供的坐標,不能完整的畫出一個區的輪廓,比如上海崇明區的被划分成幾個小圈,而實際上,應該用一個大圈把崇明區包裹起來
對應的需求,繪制出上海的所有行政區的輪廓,實現效果:
核心代碼:
showBoundarys(); //顯示行政區域 function showBoundarys() { //利用高德地圖的【行政區划查詢】api獲取上海包含的所有區 AMap.service('AMap.DistrictSearch', function() { var opts = { subdistrict: 2, ////返回下一級行政區。取值2,可以獲取到上海的所有區 extensions: 'all', //返回行政區邊界坐標組等具體信息 level: 'city' //查詢行政級別為 市 }; //實例化DistrictSearch var district = new AMap.DistrictSearch(opts); //行政區查詢 district.search("上海市", function(status, result) { var cityArr = result.districtList[0].districtList[0].districtList; for(var i=0;i<cityArr.length;i++){ showBoundary(cityArr[i].adcode); } }) }); } /** * 用adcode(區域編碼)查詢,可以唯一定位到具體的地址。 * 用name(行政區名稱)可能查出多個地址,不精確 */ function showBoundary(adcode) { //利用高德地圖的【行政區划查詢】api獲取每個區的行政區邊界坐標點,再根據這些坐標點在谷歌地圖上繪制區域輪廓線 //加載行政區划插件 AMap.service('AMap.DistrictSearch', function() { var opts = { subdistrict: 0, //返回下一級行政區 extensions: 'all', //返回行政區邊界坐標組等具體信息 level: 'district' //查詢行政級別為 市 }; //實例化DistrictSearch var district = new AMap.DistrictSearch(opts); district.setLevel('district'); //行政區查詢 district.search(adcode, function(status, result) { var bounds = result.districtList[0].boundaries; if (bounds) { for (var i = 0, l = bounds.length; i < l; i++) {//每個區域可能有分能幾個小塊,比如金山區除了有一塊陸地圈,還有海上獨立的三個小島 var boundsItem = bounds[i]; var triangleCoords = []; for(var j = 0; j < boundsItem.length; j++){ triangleCoords.push(new google.maps.LatLng(boundsItem[j].lat, boundsItem[j].lng)); } var bermudaTriangle = new google.maps.Polygon({ paths : triangleCoords, strokeColor : "#1c49ff", strokeOpacity : 0.8, strokeWeight : 1, // fillColor : "#FF0000", fillOpacity : 0, text:"xxxxx" }); bermudaTriangle.setMap(map); map.setZoom(9); } } }); }); }
參考網址:
1.高德,百度,Google地圖定位偏移以及坐標系轉換:
https://www.jianshu.com/p/8975586a820e
2.坐標拾取工具(GCJ-02坐標)
http://zhaoziang.com/amap/picpoint.html
3.WGS84、GCJ02、BD09地圖坐標系間的坐標轉換及坐標距離計算
http://nightfarmer.github.io/2016/12/01/GPSUtil/
4.高德地圖的API比百度、谷歌的好用,比如行政區域的坐標比百度的精確,接口文檔詳細,而谷歌的文檔還是英文的,例子也不夠全。以后選擇地圖,首選高德地圖
5.高德地圖官方demo
http://lbs.amap.com/api/javascript-api/example/district-search/draw-district-boundaries
6.地球坐標系 (WGS-84)到火星坐標系 (GCJ-02) Javascript版
https://github.com/hiwanz/wgs2mars.js