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

最新推荐文章于 2023-07-29 12:01:23 发布

厚积而薄发1528

最新推荐文章于 2023-07-29 12:01:23 发布

阅读量5.6k

点赞数 6

分类专栏：百度地图前端文章标签：百度地图增加边界百度地图自定义边界区域

本文链接：https://blog.csdn.net/qq_38519358/article/details/109462922

版权

前端同时被 2 个专栏收录

46 篇文章 1 订阅

订阅专栏

百度地图

4 篇文章 0 订阅

订阅专栏

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

一种是使用百度地图自带的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>

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