首页 > JavaScript > 百度地图初探3-对全国各省市行政区域进行着色区分

百度地图初探3-对全国各省市行政区域进行着色区分

对全国各省市行政区域进行着色区分

引入js库

< sc ript type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=57723a5de6d4ceb16a7cabae630">< /s cript>

创建地图容器

<div id="allmap"></div>

创建Map实例

var map = new BMap.Map("allmap"); 

初始化地图,设置中心点坐标和地图级别

map.centerAndZoom(new BMap.Point(106.404, 39.915), 6); 

设置全国行政区数据【区域名-染色】

var provinces = ["广西-#C8C1E3", "广东-#FBC5DC", "湖南-#DBEDC7", "贵州-#E7CCAF", "云南-#DBEDC7",
        "福建-#FEFCBF", "江西-#E7CCAF", "浙江-#C8C1E3", "安徽-#FBC5DC", "湖北-#C8C1E3",
        "河南-#DBECC8", "江苏-#DBECC8", "四川-#FCFBBB", "海南省-#FCFBBB", "山东-#FCFBBB", "辽宁-#FCFBBB",
        "新疆-#FCFBBB", "西藏-#E7CCAF", "陕西-#E7CCAF", "河北-#E7CCAF", "黑龙江-#E7CCAF", "宁夏-#FBC5DC",
        "内蒙古自治区-#DBEDC7", "青海-#DBEDC7", "甘肃-#C8C1E3", "山西-#FBC5DC", "吉林省-#C8C1E3",
        "北京-#FBC5DC", "天津-#C8C1E3", "三河市-#E7CCAF", "上海-#FCFBBB", "重庆市-#FBC5DC", "香港-#C8C1E3"
    ];

单个行政区域的染色函数

function getBoundary(province) {  //此函数需要传入一个province参数,为上述数据中的一项
    var silvern = province.split("-"); //将数据项拆分,放入一个数组中待用
    var boundary = new BMap.Boundary(); //创建区域边界对象        
    boundary.get(silvern[0], function(rs){  //获取区域边界数据,silvern[0]为区域名称,get方法会返回边界数据给第二个参数:回调函数 ;此处须注意,一个省有可能有多个闭合区域组成        
    for (var i = 0; i < rs.boundaries.length; i++) { //boundaries.length代表行政区域的闭合区域有多少个,其中,每个boundaries为一个闭合区域中点的数组

                  var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 1, strokeColor: silvern[1], fillColor: silvern[1], fillOpacity:.5 }); //建立多边形覆盖物对象
                map.addOverlay(ply);  //添加覆盖物

     }    
    });  
} 

逐个显示行政区域

for (var i = provinces.length - 1; i >= 0; i--) {
    getBoundary(provinces[i]);
}

参考:

http://developer.baidu.com/map/reference/index.php?title=Class:%E6%A0%B8%E5%BF%83%E7%B1%BB/Map
http://developer.baidu.com/map/reference/index.php?title=Class:%E6%9C%8D%E5%8A%A1%E7%B1%BB/Boundary
http://developer.baidu.com/map/reference/index.php?title=Class:%E8%A6%86%E7%9B%96%E7%89%A9%E7%B1%BB/Polygon
http://www.arceyes.com/down/gisarticle/html/896.html
http://developer.baidu.com/map/jsdemo.htm#c1_10
http://blo g.sina. com. cn/s/blog_63f3e0060101d68h.html

上一篇: 百度地图初探2

下一篇: shim和polyfill.它们指的都是什么,又有什么区别