百度地图API示例之设置地图显示范围
代码
<!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{width:100%;height:500px;}
p{margin-left:5px; font-size:14px;}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=sSelQoVi2L3KofLo1HOobonW"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/AreaRestriction/1.2/src/AreaRestriction_min.js"></script>
<title>设置地图显示范围</title>
</head>
<body>
<div id="allmap"></div>
<p>将地图显示范围设定在指定区域，地图拖出该区域后会重新弹回。</p>
</body>
</html>
<script type="text/javascript">
//百度地图API功能
var map = new BMap.Map("allmap");
map.centerAndZoom(new BMap.Point(116.404, 39.915), 13);
// map.centerAndZoom(new BMap.Point(116.027143, 39.772348),13); // 测试为左下角的位置
// map.centerAndZoom(new BMap.Point(116.832025, 40.126349),13); // 测试为右上角的位置
map.enableScrollWheelZoom(); // 允许滚动
var b = new BMap.Bounds(new BMap.Point(116.027143, 39.772348),new BMap.Point(116.832025, 40.126349)); // 范围 左下角，右上角的点位置
try { // js中尽然还有try catch方法，可以避免bug引起的错误
BMapLib.AreaRestriction.setBounds(map, b); // 已map为中心，已b为范围的地图
} catch (e) {
// 捕获错误异常
alert(e);
}
</script>
引入更多的类AreaRestriction_min
/**
* @fileoverview 百度地图浏览区域限制类，对外开放。
* 允许开发者输入限定浏览的地图区域的Bounds值，
* 则地图浏览者只能在限定区域内浏览地图。
* 基于Baidu Map API 1.2。
*
* @author Baidu Map Api Group
* @version 1.2
*/
/**
* @namespace BMap的所有library类均放在BMapLib命名空间下
*/
var BMapLib = window.BMapLib = BMapLib || {};
(function() {
/**
* @exports AreaRestriction as BMapLib.AreaRestriction
*/
var AreaRestriction =
/**
* AreaRestriction类，静态类，不用实例化
* @class AreaRestriction类提供的都是静态方法，勿需实例化即可使用。
*/
BMapLib.AreaRestriction = function(){
}
/**
* 是否已经对区域进行过限定的标识
* @private
* @type {Boolean}
*/
var _isRestricted = false;
/**
* map对象
* @private
* @type {BMap}
*/
var _map = null;
/**
* 开发者需要限定的区域
* @private
* @type {BMap.Bounds}
*/
var _bounds = null;
/**
* 对可浏览地图区域的限定方法
* @param {BMap} map map对象
* @param {BMap.Bounds} bounds 开发者需要限定的区域
*
* @return {Boolean} 完成了对区域的限制即返回true，否则为false
*/
AreaRestriction.setBounds = function(map, bounds){
// 验证输入值的合法性
if (!map ||
!bounds ||
!(bounds instanceof BMap.Bounds)) {
throw "请检查传入参数值的合法性";
return false;
}
if (_isRestricted) {
this.clearBounds();
}
_map = map;
_bounds = bounds;
// 添加地图的moving事件，用以对浏览区域的限制
_map.addEventListener("moveend", this._mapMoveendEvent);
_isRestricted = true;
return true;
};
/**
* 需要绑定在地图移动事件中的操作，主要控制出界时的地图重新定位
* @param {Event} e e对象
*
* @return 无返回值
*/
AreaRestriction._mapMoveendEvent = function(e) {
// 如果当前完全没有出界，则无操作
if (_bounds.containsBounds(_map.getBounds())) {
return;
}
// 两个需要对比的bound区域的边界值
var curBounds = _map.getBounds(),
curBoundsSW = curBounds.getSouthWest(),
curBoundsNE = curBounds.getNorthEast(),
_boundsSW = _bounds.getSouthWest(),
_boundsNE = _bounds.getNorthEast();
// 需要计算定位中心点的四个边界
var boundary = {n : 0, e : 0, s : 0, w : 0};
// 计算需要定位的中心点的上方边界
boundary.n = (curBoundsNE.lat < _boundsNE.lat) ?
curBoundsNE.lat :
_boundsNE.lat;
// 计算需要定位的中心点的右边边界
boundary.e = (curBoundsNE.lng < _boundsNE.lng) ?
curBoundsNE.lng :
_boundsNE.lng;
// 计算需要定位的中心点的下方边界
boundary.s = (curBoundsSW.lat < _boundsSW.lat) ?
_boundsSW.lat :
curBoundsSW.lat;
// 计算需要定位的中心点的左边边界
boundary.w = (curBoundsSW.lng < _boundsSW.lng) ?
_boundsSW.lng :
curBoundsSW.lng;
// 设置新的中心点
var center = new BMap.Point(boundary.w + (boundary.e - boundary.w) / 2,
boundary.s + (boundary.n - boundary.s) / 2);
setTimeout(function() {
_map.panTo(center, {noAnimation : "no"});
}, 1);
};
/**
* 清除对地图浏览区域限定的状态
* @return 无返回值
*/
AreaRestriction.clearBounds = function(){
if (!_isRestricted) {
return;
}
_map.removeEventListener("moveend", this._mapMoveendEvent);
_isRestricted = false;
};
})();
百度地图API示例之设置地图显示范围的更多相关文章
- 百度地图API示例之设置地图最大、最小级别
代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" cont ...
- 百度地图API示例之设置级别setZoom与禁止拖拽disableDragging
百度地图API示例之设置级别setZoom与禁止拖拽disableDragging 设置级别 <html> <head> <meta http-equiv="C ...
- 百度地图API示例之移动地图
级别为6 级别为8 级别为12 代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Conten ...
- 百度地图API示例之根据城市名设置地图中心点
代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" con ...
- 【百度地图API】如何利用地图API制作汽车沿道路行驶的动画？——如何获得道路层数据
原文:[百度地图API]如何利用地图API制作汽车沿道路行驶的动画?--如何获得道路层数据 有几个做汽车导航的朋友问我说,他们想在地图上制作一辆车沿着道路行驶的动画.可是,百度地图的道路数据并没有公开 ...
- 【百度地图API】如何自定义地图图层？实例：制作麻点图（自定义图层+热区）
原文:[百度地图API]如何自定义地图图层?实例:制作麻点图(自定义图层+热区) 摘要:自定义地图图层的用途十分广泛.常见的应用,比如制作魔兽地图和清华校园地图(使用切图工具即可轻松实现).今天我们来 ...
- 【百度地图API】如何在地图上添加标注？——另有：坐标拾取工具+打车费用接口介绍
原文:[百度地图API]如何在地图上添加标注?--另有:坐标拾取工具+打车费用接口介绍 摘要: 在这篇文章中,你将学会,如何利用百度地图API进行标注.如何使用API新增的打车费用接口. ------ ...
- 【百度地图API】多家地图API内存消耗对比测验（带源码）
原文:[百度地图API]多家地图API内存消耗对比测验(带源码) 任务描述: 啊,美妙的春节结束了.酸奶小妹和妈妈的山西平遥之旅也宣告成功!距离平遥古城7km,有一个同样身为“世界文化遗产”的寺庙,叫 ...
- 百度地图api通过地址显示地图，白名单
百度地图api通过地址显示地图,白名单 http://developer.baidu.com/map/jsdemo.htm#i7_1?qq-pf-to=pcqq.c2c---------------- ...
随机推荐
- 《Java中的包机制》
/* 包的机制:(1) */ package lee; public class PackageTest { public void Test(int num) { System.out.printl ...
- iOS应用数据存储2-SQLite3数据库
SQLite3 SQLite3是一款开源的嵌入式关系型数据库,可移植性好,易使用,内存开销小. SQLite3是无类型的,意味着你可以保存任何类型的数据到任意表的任意字段中. SQLite ...
- MySQL数据库2 - 登录MySQL及数据库管理
一. 登录数据库 1.使用命令窗口登录MySQL 启动Mysql服务 -> 打开命令窗口 -> 输入登录密码 具体步骤:开始菜单 - 控制面板 - 管理工具 - 服务 - Mysql56( ...
- Linux TC流量控制HOWTO中文版
<本文摘自Linux的高级路由和流量控制HOWTO中文版 第9章节>网人郭工进行再次编译: 利用队列,我们可以控制数据发送的方式.记住我们只能对发送数据进行控制(或称为整形).其实,我们无 ...
- PAT (Basic Level) Practise：1037. 在霍格沃茨找零钱
[题目链接] 如果你是哈利·波特迷,你会知道魔法世界有它自己的货币系统 —— 就如海格告诉哈利的:“十七个银西可(Sickle)兑一个加隆(Galleon),二十九个纳特(Knut)兑一个西可,很容易 ...
- Java学习总结（二）----Java语言基础
1. Java语言基础 2.1 关键字 定义:被java语言赋予特殊含义的单词 特点:关键字中的字母都为小写 用于定义数据类型的关键字 class,interface,byte,short,i ...
- 复制到剪贴板的JS实现--ZeroClipboard （兼解决IE下兼容问题）
复制到剪贴板的JS实现--ZeroClipboard (兼解决IE下兼容问题) 相信绝大多数人都遇到过这样的功能实现,“复制”或者“复制到剪贴板”这样的功能.但是由于各大浏览器的实现方案不一样,导致几 ...
- Win10外包公司——长年承接Win10App外包、Win10通用应用外包
在几天前的WinHEC大会中,微软特意在大会中展示了其对通用应用的称呼规范,现在,适用于Windows通用平台的应用的正式名称为“Windows应用”(Windows apps),简洁明了. 总而言之 ...
- TIOBE Index for November 2015（转载）
原文地址:http://www.tiobe.com/index.php/content/paperinfo/tpci/index.html November Headline: Java once a ...
- windows server 2008服务器 做raid0
dell服务器,启动后,根据提示按F10进入raid设置,设置成raid0 我们的服务器是4块硬盘,每块600G,做raid0时,生成一个虚拟磁盘vdisk. 做完raid之后,做OS部署 重启服务器 ...