在谷歌地圖上繪制行政區域輪廓【結合高德地圖的API】

實現思路：

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