您的位置：首页 > 其它

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

2016-04-06 10:27 302 查看

关于百度地图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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 百度地图 api 地区范围控制范围控制设置范围

相关文章推荐

新的分享

章节导航

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