<!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>