百度地图添加自定义边界值

使用百度地图过程中常常需要给某个区域添加边界，这里有两种方法：

一种是使用百度地图自带的Boundary方法，通过输入区域名称可自动给地图添加边界

不足：这种方法只适用于省市区级行政区域的，如果想自定义区域增加边界，则不能使用该方法

code:

<!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><title>添加行政区划</title>
</head>
<body><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();function getBoundary(){var bdary = new BMap.Boundary();bdary.get("北京市海淀区", function(rs){       //获取行政区域map.clearOverlays();        //清除地图覆盖物       var count = rs.boundaries.length; //行政区域的点有多少个if (count === 0) {alert('未能获取当前输入行政区域');return ;}var pointArray = [];for (var i = 0; i < count; i++) {var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 4,fillColor: '#00F5FF', fillOpacity: '0.2', strokeColor: "#ff0000"}); //建立多边形覆盖物map.addOverlay(ply);  //添加覆盖物pointArray = pointArray.concat(ply.getPath());}    map.setViewport(pointArray);    //调整视野  // addlabel();               });   }setTimeout(function(){getBoundary();}, 0);
</script>

第二种就是通过百度地图的Polygon方法通过添加自定义多边形来对你的区域进行区域划分

首先你要通过各种方法获取你自定义边界的边界点（越详细边界描述的越清晰，具体获取方法可百度），然后将各个点连成线最终形成一个闭环

这里示例给普陀山添加区域边界

code:

<!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{width: 100%;height: 100%;margin:0;font-family:"微软雅黑";}#allmap{height:100%;width:100%;}</style><script type="text/javascript" src="http://api.map.baidu.com/api?type=webgl&v=1.0&ak=您的密钥"></script><title>添加自定义边界</title>
</head>
<body><div id="allmap"></div>
</body>
</html>
<script type="text/javascript">// 百度地图API功能var map = new BMapGL.Map("allmap");var point = new BMapGL.Point(122.397608,30.007976);map.centerAndZoom(point, 14);var polygon = new BMapGL.Polygon([new BMapGL.Point(122.412275, 30.038554),new BMapGL.Point(122.413712,30.035553),new BMapGL.Point(122.414862,30.034302),new BMapGL.Point(122.416874,30.032051),new BMapGL.Point(122.415437,30.03105),new BMapGL.Point(122.413137,30.03105),new BMapGL.Point(122.4117,30.03105),new BMapGL.Point(122.410406,30.0303),new BMapGL.Point(122.410837,30.028299),new BMapGL.Point(122.41055,30.028424),new BMapGL.Point(122.412275,30.025922),new BMapGL.Point(122.408107,30.025547),new BMapGL.Point(122.406094,30.025172),new BMapGL.Point(122.408681,30.023046),new BMapGL.Point(122.408681,30.022545),new BMapGL.Point(122.407532,30.019293),new BMapGL.Point(122.409688,30.014415),new BMapGL.Point(122.410119,30.014165),new BMapGL.Point(122.412706,30.015916),new BMapGL.Point(122.412418,30.013039),new BMapGL.Point(122.416012,30.013914),new BMapGL.Point(122.416155,30.011037),new BMapGL.Point(122.409688,30.014415),new BMapGL.Point(122.41673,30.011037),new BMapGL.Point(122.421473,30.011913),new BMapGL.Point(122.424348,30.008535),new BMapGL.Point(122.421186,30.005658),new BMapGL.Point(122.403938,30.007034),new BMapGL.Point(122.399052,29.987642),new BMapGL.Point(122.402357,29.987391),new BMapGL.Point(122.402932,29.980009),new BMapGL.Point(122.398333,29.978507),new BMapGL.Point(122.396465,29.982887),new BMapGL.Point(122.392728,29.979133),new BMapGL.Point(122.392584,29.978382),new BMapGL.Point(122.389997,29.980134),new BMapGL.Point(122.374905,29.989268),new BMapGL.Point(122.379361,29.988643),new BMapGL.Point(122.383816,30.011913),new BMapGL.Point(122.386835,30.011037),new BMapGL.Point(122.386547,30.021044),new BMapGL.Point(122.391147,30.022045),new BMapGL.Point(122.386547,30.029675),new BMapGL.Point(122.392584,30.028174),new BMapGL.Point(122.397471,30.03055),new BMapGL.Point(122.403076,30.028924),new BMapGL.Point(122.411987,30.038554),], {strokeWeight: 4,fillColor: '#00F5FF', fillOpacity: '0.2', strokeColor: "#ff0000"});  //创建多边形//添加覆盖物map.addOverlay(polygon);           //增加多边形setTimeout(function(){add_overlay();}, 0);
</script>

小伙伴如果有疑问可以第一时间评论或留言，看到后也会及时回复的，有帮助的麻烦动动手指点个赞哟

百度地图添加自定义边界值相关推荐

百度地图添加自定义Marker+显示覆盖层次优先级
转载请注明出处:blog.csdn.net/wll995806658 实际项目中经常会集成地图,今天就只谈谈百度地图添加自定义Marker这一部分,希望对百度地图集成有这部分需求的小伙伴能有一些帮助. ...
百度地图添加自定义图标标注以及自定义动画效果
百度地图添加自定义图标标注以及自定义动画效果 1.添加自定义图标标注 2.添加自定义动画效果 2.1.标注对象marker的构成 2.2.自定义动画效果实现过程 2.3.最终实现效果上次写的是添加自 ...
百度地图添加自定义点标记、文本标注、点标记
网页效果:添加文字标签工作中遇到百度地图做相关的需求,在此做记录分享 <!DOCTYPE html> <html lang="zh-CN"> <he ...
百度地图添加自定义shp图层_GIS当中使用uDig打开shp图层，并查看数据结果
启动udig 双击udig快捷方式,等几秒后,udig启动成功,如图所示:下载地址: https://download.csdn.net/download/weixin_41986096/125302 ...
高德地图API和百度地图API哪个更适合开发者？
高德vs百度优点: 1.api十分简单易上手,高德一行代码,百度最少要五行: 2.数据量很丰盛,郊区poi<无关键字>搜索随便都有几十个,然而百度早早就关闭了该接口: 缺点: 1.偶尔出 ...
android 百度地图开发别人用不了,Android百度地图开发的那些不足之处
Android百度地图开发的那些不足之处,最近做的项目中百度地图是很重要的一个模块,其中实现了定位.自定义Marker图标.线路规划.SuggestionSearch检索.地图截图以及导航等功能.因为 ...
百度地图API 添加自定义标注多点标注
原文:百度地图API 添加自定义标注多点标注分四个文件 location.php map.css 图片数据库数据库配置自己改下 -------------------------------- ...
vue百度地图api 获取小区边界值
<div id="getMap" ></div>  this.$nextTick(function() {// 初始化百 ...
android百度地图更换定位图标,android百度地图定位，改变MyLocationOverlay默认图标（原始为蓝色点）（两种方法）...
开放地图API无外乎google ,百度,高德等.其它的还有很多,不过比较好用的就这三种了,如果不需要出国(台湾例外),则最好使用百度地图,性能比高德好的多,无聊的时候自己可以测试测试.. 下面我简单 ...

百度地图添加自定义边界值

百度地图添加自定义边界值相关推荐

最新文章

热门文章