cityMap1.html 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>获取行政区域边界坐标</title>
  6. <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=WMYeXwq7z0VcaiUXTuYTGPZsm8Selmfd"></script>
  7. </head>
  8. <body>
  9. <div id="container" style="top: 30px;width: 100%;height: 100%;overflow: hidden;position: absolute;"></div>
  10. 输入省、直辖市或县名称:
  11. <input type="text" id="districtName" style="width:200px" value="重庆市"/>
  12. <input type="button" id="getButton" name="getButton" onclick="getBoundary()" value="获取轮廓线"/>
  13. <script type="text/javascript">
  14. var map = new BMap.Map("container");
  15. map.centerAndZoom(new BMap.Point(116.403765, 39.914850), 9);
  16. map.addControl(new BMap.NavigationControl({type: BMAP_NAVIGATION_CONTROL_SMALL}));
  17. map.enableScrollWheelZoom();
  18. function getBoundary() {
  19. var bdary = new BMap.Boundary();
  20. var name = document.getElementById("districtName").value;
  21. bdary.get(name, function (rs) { //获取行政区域
  22. map.clearOverlays(); //清除地图覆盖物
  23. var count = rs.boundaries.length; //行政区域的点有多少个
  24. for (var i = 0; i < count; i++) {
  25. var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2, strokeColor: "#ff0000"}); //建立多边形覆盖物
  26. console.log("当前辖区坐标:" + name);
  27. console.log(rs.boundaries[i]);
  28. map.addOverlay(ply); //添加覆盖物
  29. map.setViewport(ply.getPath()); //调整视野
  30. }
  31. });
  32. }
  33. </script>
  34. </body>
  35. </html>