百度地图API获取行政区域边界(省、市、区县)
程序员文章站
2022-07-03 18:12:39
...
百度地图开发常用网站
1、百度地图开放平台
http://lbsyun.baidu.com/
2、百度地图 Javascript API
-
JavaScript API v3.0 http://lbsyun.baidu.com/index.php?title=jspopular3.0
-
JavaScript API v2.0 http://lbsyun.baidu.com/index.php?title=jspopular
-
JavaScript API Lite http://lbsyun.baidu.com/index.php?title=jspopularLiteV1
3、JavaScript API v2.0类参考
http://lbsyun.baidu.com/cms/jsapi/reference/jsapi_reference.html
4、百度地图示例DEMO(JavaScript API v2.0)
http://lbsyun.baidu.com/jsdemo.htm#a1_2
5、百度地图 ak 申请:(JavaScript API v2.0)
http://lbsyun.baidu.com/index.php?title=jspopular/guide/getkey
说明
项目中使用 JavaScript API v2.0 版本,当然也可以使用最新版 V3.0。
JavaScript API Lite是移动端浏览器上构建地图应用
百度地图API获取行政区域边界(省、市、区县)
1、百度地图 ak 申请:(JavaScript API v2.0)
http://lbsyun.baidu.com/index.php?title=jspopular/guide/getkey
2、使用百度地图api 获取行政区域
效果1:获取省边界
效果2:获取市边界
效果3:获取区边界
最后在页面的js代码中已将边界坐标打印出来了,可以拷贝下来将数据处理后应用到您的地图系统中。
map.html源码:注意 ak 要自己去百度地图开放平台申请
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>获取行政区域边界坐标</title>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你在百度地图开放平台申请的ak"></script>
</head>
<body>
<div id="container" style="top: 30px;width: 100%;height: 100%;overflow: hidden;position: absolute;"></div>
输入省、直辖市或县名称:
<input type="text" id="districtName" style="width:200px" value="重庆市" />
<input type="button" id="getButton" name="getButton" οnclick="getBoundary()" value="获取轮廓线" />
<script type="text/javascript" >
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.403765, 39.914850), 9);
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"}); //建立多边形覆盖物
console.log("当前辖区坐标:" + name);
console.log(rs.boundaries[i]);
map.addOverlay(ply); //添加覆盖物
map.setViewport(ply.getPath()); //调整视野
}
});
}
</script>
</body>
</html>
参考地址:
https://blog.csdn.net/qq_29099209/article/details/80193981
上一篇: SpringCloud 分布式配置中心 -Config
下一篇: Config分布式配置中心