0
点赞
收藏
分享

微信扫一扫

获取地区轮廓线

蒸熟的土豆 2021-09-24 阅读 40
随笔
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
<title>获取地区轮廓线</title>

 //注意申请的apiAK要位浏览器端的,不要选错了

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=2ZQnhHGIOWzt1csplUZ9l28rxmekCWeD"></script>
 
<style type="text/css">
 
body{font-size:13px;margin:10px}
 
#container{width:800px;height:500px;border:1px solid gray}
 
</style>

</head> 
<body> 
<div id="container"></div>
 
<br /> 
输入省、直辖市或县名称:<input type="text" id="districtName" style="width:80px" value="重庆市">
 
<input type="button" onclick="getBoundary()" value="获取轮廓线">

<script type="text/javascript">

 
var map = new BMap.Map("container");
 
map.centerAndZoom(new BMap.Point(116.99919952911377,36.652281762312036), 5);
 
map.addControl(new BMap.NavigationControl({type: BMAP_NAVIGATION_CONTROL_SMALL}));
 
map.enableScrollWheelZoom();
 
function getBoundary() {
            var bdary= new BMap.Boundary();             var name = document.getElementById("districtName").value;
                bdary.get(name, 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: 2, strokeColor: "#ff0000" }); //建立多边形覆盖物
                        map.addOverlay(ply);  //添加覆盖物
                        map.setViewport(ply.getPath());    //调整视野
                    }
                   console.log(rs.boundaries[0]);
                    
                });
        }
 
  
</script>
 </body>
 </html>
举报

相关推荐

0 条评论