在谷歌地图上绘制行政区域轮廓【结合高德地图的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.WGS8四、GCJ0二、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