<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";} </style> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=wkMfrL0doQeSxjBTRT16vssL"></script> <title>添加行政区划</title> </head> <body> <div id="allmap"></div> </body> </html> <script type="text/javascript"> // 百度地图API功能 var map = new BMap.Map("allmap"); map.setMapStyle({ styleJson:[ { "featureType": "poi", "elementType": "all", "stylers": { "color": "#ffffff", "visibility": "off" } }, { "featureType": "road", "elementType": "all", "stylers": { "color": "#ffffff", "visibility": "off" } }, { "featureType": "background", "elementType": "all", "stylers": { "color": "#ffffff" } }, { "featureType": "administrative", "elementType": "all", "stylers": { "color": "#ffffff", "visibility": "off" } } ] }); map.centerAndZoom(new BMap.Point(116.403765, 39.914850), 5); map.enableScrollWheelZoom(); function getBoundary(){ var bdary = new BMap.Boundary(); bdary.get("重庆", function(rs){ //获取行政区域 map.clearOverlays(); //清除地图覆盖物 var count = rs.boundaries.length; //行政区域的点有多少个 for(var i = 0; i < count; i++){ var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 0.01, strokeColor: "#ffffff"}); //建立多边形覆盖物 map.addOverlay(ply); //添加覆盖物 map.setViewport(ply.getPath()); //调整视野 } }); } setTimeout(function(){ getBoundary(); }, 0); var blist = []; var districtLoading = 0; function getBoundary() { addDistrict("顺义区"); addDistrict("昌平区"); addDistrict("西城区"); addDistrict("朝阳区"); addDistrict("东城区"); addDistrict("丰台区"); addDistrict("石景山区"); addDistrict("海淀区"); addDistrict("门头沟区"); addDistrict("房山区"); addDistrict("通州区"); addDistrict("大兴区"); addDistrict("怀柔区"); addDistrict("平谷区"); addDistrict("密云区"); addDistrict("延庆区"); } /** * 添加行政区划 * @param {} districtName 行政区划名 * @returns 无返回值 */ function addDistrict(districtName) { //使用计数器来控制加载过程 districtLoading++; var bdary = new BMap.Boundary(); bdary.get(districtName, function (rs) { //获取行政区域 var count = rs.boundaries.length; //行政区域的点有多少个 if (count === 0) { alert('未能获取当前输入行政区域'); return; } for (var i = 0; i < count; i++) { blist.push({ points: rs.boundaries[i], name: districtName }); }; //加载完成区域点后计数器-1 districtLoading--; if (districtLoading == 0) { //全加载完成后画端点 drawBoundary(); } }); } /** * 各种鼠标事件绑定 */ function click(evt) { alert(evt.target.name); } function mouseover(evt) { evt.target.label.setZIndex(99); evt.target.label.setPosition(evt.point); evt.target.label.show(); } function mousemove(evt) { evt.target.label.setPosition(evt.point); } function mouseout(evt) { evt.target.label.hide(); } function drawBoundary() { //包含所有区域的点数组 var pointArray = []; /*画遮蔽层的相关方法 *思路: 首先在中国地图最外画一圈，圈住理论上所有的中国领土，然后再将每个闭合区域合并进来，并全部连到西北角。 * 这样就做出了一个经过多次西北角的闭合多边形*/ //定义中国东南西北端点，作为第一层 var pNW = { lat: 59.0, lng: 73.0 } var pNE = { lat: 59.0, lng: 136.0 } var pSE = { lat: 3.0, lng: 136.0 } var pSW = { lat: 3.0, lng: 73.0 } //向数组中添加一次闭合多边形，并将西北角再加一次作为之后画闭合区域的起点 var pArray = []; pArray.push(pNW); pArray.push(pSW); pArray.push(pSE); pArray.push(pNE); pArray.push(pNW); //循环添加各闭合区域 for (var i = 0; i < blist.length; i++) { //添加显示用标签层 var label = new BMap.Label(blist[i].name, { offset: new BMap.Size(20, -10) }); label.hide(); map.addOverlay(label); //添加多边形层并显示 var ply; if((blist[i].name == "昌平区") ||(blist[i].name == "西城区") ||(blist[i].name == "朝阳区") ){ ply = new BMap.Polygon(blist[i].points, { strokeWeight: 2, strokeColor: "#00FF00", fillOpacity: 1, fillColor: "yellow" }); //建立多边形覆盖物 }else{ ply = new BMap.Polygon(blist[i].points, { strokeWeight: 2, strokeColor: "#00FF00", fillOpacity: 1, fillColor: "#eeeeee" }); //建立多边形覆盖物 } //var ply = new BMap.Polygon(blist[i].points, { strokeWeight: 5, strokeColor: "#00FF00", fillOpacity: 1, fillColor: "yellow" }); //建立多边形覆盖物 switch(blist[i].name){ case "昌平区": ply.name = "Changping district"; break; case "西城区": ply.name = "Xicheng district"; break; case "朝阳区": ply.name = "Chaoyang district"; break; case "东城区": ply.name = "Dongcheng district"; break; case "丰台区": ply.name = "Fengtai district"; break; case "石景山区": ply.name = "Shijingshan district"; break; case "海淀区": ply.name = "Haidian district"; break; case "门头沟区": ply.name = "Mentougou district"; break; case "房山区": ply.name = "Fangshan district"; break; case "通州区": ply.name = "Tongzhou district"; break; case "顺义区": ply.name = "Shunyi district"; break; case "大兴区": ply.name = "Daxing district"; break; case "怀柔区": ply.name = "Huairou district"; break; case "平谷区": ply.name = "Pinggu district"; break; case "密云区": ply.name = "Miyun district"; break; case "延庆区": ply.name = "Yanqing district"; break; } //ply.name = blist[i].name; ply.label = label; ply.addEventListener("click", click); ply.addEventListener("mouseover", mouseover); ply.addEventListener("mouseout", mouseout); ply.addEventListener("mousemove", mousemove); map.addOverlay(ply); //添加名称标签层 var centerlabel = new BMap.Label(ply.name, { offset: new BMap.Size(0, 0) }); centerlabel.setPosition(ply.getBounds().getCenter()); centerlabel.setStyle({ color : "red", fontFamily:"微软雅黑" }); //map.addOverlay(centerlabel); //将点增加到视野范围内 var path = ply.getPath(); pointArray = pointArray.concat(path); //将闭合区域加到遮蔽层上，每次添加完后要再加一次西北角作为下次添加的起点和最后一次的终点 pArray = pArray.concat(path); pArray.push(pArray[0]); } //限定显示区域，需要引用api库 var boundply = new BMap.Polygon(pointArray); BMapLib.AreaRestriction.setBounds(map, boundply.getBounds()); map.setViewport(pointArray); //调整视野 //添加遮蔽层 var plyall = new BMap.Polygon(pArray, { strokeOpacity: 0.0000001, strokeColor: "#000000", strokeWeight: 0.00001, fillColor: "#000000", fillOpacity: 0.4 }); //建立多边形覆盖物 map.addOverlay(plyall); } setTimeout(function () { getBoundary(); }, 100); </script>