1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > 百度地图添加自定义边界值

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

时间:2022-05-17 13:32:21

相关推荐

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

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

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

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

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。