百度地圖api
添加覆蓋物
https://lbsyun.baidu.com/index.php?title=jspopularGL/guide/addOverlay
獲取邊界的方法
https://mapopen-pub-jsapi.bj.bcebos.com/jsapi/reference/jsapi_webgl_1_0.html#a8b54
示例
獲取數據方式1
可以獲取 rs.boundaries 里這種形式的字符串，但是這種字符串每次獲取后使用都需要先處理成數組，每次使用都要處理也挺麻煩的，還不如直接轉成json數組字符串后再保存
121.432606, 30.687898;121.432778, 30.686555;121.433259, 30.685891;121.433826, 30.68603;121.434096, 30.686618;121.434582, 30.686869;121.436222, 30.6871;121.436011, 30.687458;121.435832, 30.687534;121.435593, 30.687583;121.435265, 30.687603;121.434488, 30.687682;121.433905, 30.687776;121.433292, 30.687948;121.432903, 30.688057;121.432606, 30.687898
獲取數據方式2
也可以獲取多段線的經緯度坐標點，然后轉成json字符串，但是本身經緯度坐標數據就很多，再在每個坐標點的前面加 lng 和 lat 描述，無意是增大了文件的體積
獲取數據方式3
保存成下面這種數組格式應該是使用快捷有占用空間小的形式了
[[117.09158, 32.536075], [117.091907, 32.536158], [117.092353, 32.536217], [117.093127, 32.536233], [117.093634, 32.536193], [117.09411, 32.536127], [117.094645, 32.536138], [117.095182, 32.536149], [117.096283, 32.536526], [117.096626, 32.536659], [117.097101, 32.536732], [117.097488, 32.536765], [117.09789, 32.536912], [117.098337, 32.537061], [117.09865, 32.537231], [117.099112, 32.537543], [117.099632, 32.538009], [117.09996, 32.538148],
//字符串封裝為json字符串 function spiltStr(city) { var t = new Date().getTime(); var points = "["; var separator = ""; $.each(city.split(";"), function(index, value) { points += separator + "[" + value + "]"; separator = ", " }); points += "]"; console.log(points); console.log(new Date().getTime() - t); // 4 }
示例代碼
<!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="></script> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.js"></script> <title>添加行政區划</title> </head> <body> <div id="getCity" style="margin: 1% 40%;"> <input type="text" placeholder="請輸入行政區名字" /> <button id="city">獲取行政區邊界坐標</button> </div> <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(); $('#city').click(function() { var city = $(':input').val(); var bdary = new BMap.Boundary(); bdary.get(city, function(rs) { //獲取行政區域 map.clearOverlays(); //清除地圖覆蓋物 var count = rs.boundaries.length; //行政區域的點有多少個 //console.log(rs.boundaries); 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" }); //建立多邊形覆蓋物 //console.log(ply); spiltStr(rs.boundaries[i]); map.addOverlay(ply); //添加覆蓋物 pointArray = pointArray.concat(ply.getPath()); } map.setViewport(pointArray); //調整視野 }); }); //字符串封裝為json字符串 function spiltStr(city) { var t = new Date().getTime(); var points = "["; var separator = ""; $.each(city.split(";"), function(index, value) { points += separator + "[" + value + "]"; separator = ", " }); points += "]"; console.log(points); console.log(new Date().getTime() - t); // 4 } function spiltStr333(city) { // 效率相對較低 var t = new Date().getTime(); var points = []; $.each(city.split(";"), function(index, value) { points.push(value.split(',')); }); var data = JSON.stringify(points); console.log(data); console.log(new Date().getTime() - t); // 7 } function spiltStr222(city) { // 占用空間大 var points = []; $.each(city.split(";"), function(index, value) { var point = {}; point.lng = value.split(',')[0]; point.lat = value.split(',')[1]; points.push(point); }); var data = JSON.stringify(points); //console.log("data " + data); } </script>