百度地图API画行政区域边界轮廓线
通过百度地图API方法自动进行优雅画出区域行政的边界线，目录支持到“市级、县级”。不支持镇级或以下。
1、请将“您的秘钥AK”改成自己的秘钥。
2、方法一：（新）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>添加点标记</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<style>
body,
html,
#container {
overflow: hidden;
width: 100%;
height: 100%;
margin: 0;
font-family: "微软雅黑";
}
</style>
<script src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=您的秘钥AK"></script>
</head>
<body>
<div id="container"></div>
</body>
</html>
<script>
var map = new BMapGL.Map('container', {
enableDblclickZoom: false,
displayOptions: {
building: false
}
});
map.centerAndZoom(new BMapGL.Point(116.718, 40.142), 11);
map.enableScrollWheelZoom(true);
var bd = new BMapGL.Boundary();
bd.get('广东省广州市白云区', function (rs) {
//console.log('外轮廓：', rs.boundaries[0]);
// console.log('内镂空：', rs.boundaries[1]);
var hole = new BMapGL.Polygon(rs.boundaries, {
fillColor: 'blue',
fillOpacity: 0.2
});
map.addOverlay(hole);
var ply = new BMapGL.Polygon(rs.boundaries[0])
map.setViewport(ply.getPath());
});
</script>3、方法二（v3）：
需将js引入文件地址前缀改成：
<script src="http://api.map.baidu.com/api?v=3.0&ak=您的秘钥AK"></script>
<script>
var map = new BMap.Map("container");
map.centerAndZoom(new BMap.Point(116.403765, 39.914850), 5);
map.addControl(new BMap.NavigationControl({type: BMAP_NAVIGATION_CONTROL_SMALL}));
map.enableScrollWheelZoom();
var bdary = new BMap.Boundary();
var name = '广东省广州市白云区';
bdary.get(name, function(rs){ //获取行政区域
console.log(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()); //调整视野
}
});
</script>4、预览效果
本文作者： Liaodeity
本文链接： https://www.jianbaizhan.com/article/725
版权声明： 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处！