百度地圖---點亮城市
阿新 • • 發佈:2018-10-31
效果圖
程式碼如下
<!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=yZSTYLk9UUvs0ZqXqBbtTp8ViKk5vxLM"></script> <title>新增行政區劃</title> </head> <body> <div id="allmap"></div> </body> </html> <script type="text/javascript"> // 百度地圖API功能 var map = new BMap.Map("allmap"); map.centerAndZoom(new BMap.Point(116.403765, 39.914850), 5); map.enableScrollWheelZoom(); map.setMapStyle({ style: "grayscale" }); function getBoundary(cityName) { var bdary = new BMap.Boundary(); bdary.get(cityName, function(rs) { //獲取行政區域 map.clearOverlays(); var count = rs.boundaries.length; //行政區域的點有多少個 if (count === 0) { alert('未能獲取當前輸入行政區域'); return; } var pointArray = []; for (var i = 0; i < count; i++) { var ply = new BMap.Polygon(rs.boundaries[i], { strokeWeight: 2, strokeColor: "#ff0000", fillColor: "#ff0000" }); //建立多邊形覆蓋物 map.addOverlay(ply); //新增覆蓋物 pointArray = pointArray.concat(ply.getPath()); } map.setViewport(pointArray); //調整視野 }); } var a = [ "北京市", "天津市", "石家莊市", "廊坊市", "太原市", "上海市", "杭州市", "紹興市", "青島市", "德州市", "武漢市", "廣州市", "深圳市", "東莞市", "重慶市", "成都市", "眉山市", "西安市" ] var i = 0; var timer = setInterval(function() { if (i == a.length) { map.clearOverlays(); map.centerAndZoom(new BMap.Point(116.403765, 39.914850), 5); for (var n = 0; n < a.length; n++) { getBoundary1(a[n]) } clearInterval(timer) } else { getBoundary(a[i++]) } }, 2000) function getBoundary1(cityName) { var bdary = new BMap.Boundary(); bdary.get(cityName, function(rs) { //獲取行政區域 var count = rs.boundaries.length; //行政區域的點有多少個 if (count === 0) { alert('未能獲取當前輸入行政區域'); return; } var pointArray = []; for (var i = 0; i < count; i++) { var ply = new BMap.Polygon(rs.boundaries[i], { strokeWeight: 2, strokeColor: "#ff0000", fillColor: "#ff0000" }); //建立多邊形覆蓋物 map.addOverlay(ply); //新增覆蓋物 } }); } </script>