关于百度地图API显示地区范围控制的问题

最新推荐文章于 2023-01-28 16:58:53 发布

一碗老面i

最新推荐文章于 2023-01-28 16:58:53 发布

阅读量1.9w

点赞数 3

分类专栏：百度地图文章标签：百度地图 api 地区范围控制范围控制设置范围

百度地图专栏收录该内容

1 篇文章 0 订阅

订阅专栏

关于百度地图API显示地区范围控制的问题，这个有很多种方法，需要看个人需求下面列举两种方法
1.假如我只想在

加载地图的时候显示郑州市所包含的范围，其他地方屏蔽掉，或者不让拖拽（如有图所示）

控制区域范围，比如我只想显示北京市，只能在北京市内拖曳——地图控制在某一区域，具体实现

<!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实例
//map.centerAndZoom(new BMap.Point(116.404, 39.915), 15); // 初始化地图,设置中心点坐标和地图级别
var map = new BMap.Map("allmap");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 13);
map.enableScrollWheelZoom(); // 允许滚动

map.addControl(new BMap.MapTypeControl()); //添加地图类型控件

//添加地图平移缩放控件

map.addControl(new BMap.NavigationControl());

//控制地图的最大和最小缩放级别
map.setMinZoom(16);
map.setMaxZoom(18);
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放

var strictBounds=new Bmap.Bounds(new BMap.Point(116.3645,39.9673),new BMap.Point(116.3646,39.9685));//sw西南,ne东北
var strictBounds=map.getBounds();
map.addEventListener("dragend", function(){
if(strictBounds.containsPoint(map.getCenter()))return;
var c=map.getCenter();
x=c.lng,
y=c.lat,
maxX=strictBounds.getNorthEast().lng,
maxY=strictBounds.getNorthEast().lat,
minX=strictBounds.getSouthWest().lng,
minY=strictBounds.getSouthWest().lat;
if (x < minX) x = minX;
if (x > maxX) x = maxX;
if (y < minY) y = minY;
if (y > maxY) y = maxY;
map.centerAndZoom(new BMap.Point(x,y),map.getZoom());
})
</script>