代码

<!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示例之设置地图显示范围的更多相关文章

  1. 百度地图API示例之设置地图最大、最小级别

    代码 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" cont ...

  2. 百度地图API示例之设置级别setZoom与禁止拖拽disableDragging

    百度地图API示例之设置级别setZoom与禁止拖拽disableDragging 设置级别 <html> <head> <meta http-equiv="C ...

  3. 百度地图API示例之移动地图

    级别为6 级别为8 级别为12 代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Conten ...

  4. 百度地图API示例之根据城市名设置地图中心点

    代码: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" con ...

  5. 【百度地图API】如何利用地图API制作汽车沿道路行驶的动画？——如何获得道路层数据

    原文:[百度地图API]如何利用地图API制作汽车沿道路行驶的动画?--如何获得道路层数据 有几个做汽车导航的朋友问我说,他们想在地图上制作一辆车沿着道路行驶的动画.可是,百度地图的道路数据并没有公开 ...

  6. 【百度地图API】如何自定义地图图层？实例：制作麻点图（自定义图层+热区）

    原文:[百度地图API]如何自定义地图图层?实例:制作麻点图(自定义图层+热区) 摘要:自定义地图图层的用途十分广泛.常见的应用,比如制作魔兽地图和清华校园地图(使用切图工具即可轻松实现).今天我们来 ...

  7. 【百度地图API】如何在地图上添加标注？——另有：坐标拾取工具+打车费用接口介绍

    原文:[百度地图API]如何在地图上添加标注?--另有:坐标拾取工具+打车费用接口介绍 摘要: 在这篇文章中,你将学会,如何利用百度地图API进行标注.如何使用API新增的打车费用接口. ------ ...

  8. 【百度地图API】多家地图API内存消耗对比测验（带源码）

    原文:[百度地图API]多家地图API内存消耗对比测验(带源码) 任务描述: 啊,美妙的春节结束了.酸奶小妹和妈妈的山西平遥之旅也宣告成功!距离平遥古城7km,有一个同样身为“世界文化遗产”的寺庙,叫 ...

  9. 百度地图api通过地址显示地图，白名单

    百度地图api通过地址显示地图,白名单 http://developer.baidu.com/map/jsdemo.htm#i7_1?qq-pf-to=pcqq.c2c---------------- ...

随机推荐

  1. Spark随笔（一）：Spark的综合认识

    一.Spark与Hadoop的关系 Spark和Hadoop只是共用了底层的MapReduce编程模型,即它们均是基于MapReduce思想所开发的分布式数据处理系统. Hadoop采用MapRedu ...

  2. C++复习-练习-1

    上周做多媒体技术的作业,JPEG编码问题:FDCT.量化.逆量化和IDCT,只是简单套公式,但还是感觉自己C++好渣...太久没做,手生了,可怕可怕. 所以复习了下文件操作和..基础操作.这里贴一些当 ...

  3. OpenSSL - 网络安全之数据加密和数字证书

    功能应用: 消息摘要,给文件或数据生成消息摘要,消息摘要只能校验数据的完整性,如SHA.MD5 数据加密和解密:对数据进行加密解密,OpenSSL实现了所有加密算法 数字证书:可以通过命令行或代码生成 ...

  4. （实用篇）PHP中unset,array_splice删除数组中元素的区别

    php中删除数组元素是非常的简单的,但有时删除数组需要对索引进行一些排序要求我们会使用到相关的函数,这里我们来介绍使用unset,array_splice删除数组中的元素区别吧 如果要在某个数组中删除 ...

  5. 认识web前端

    对于一个只是浅尝辄止c语言.学过汇编语言的我,思考了半年终于在这一天入了坑,学习web前端. web前端,看着这个名字好高大上,其实我目前的理解就是写页面,是各种图片动画文字在一个页面上呈现,再一点能 ...

  6. android首次点击没反应，第二次才反应

    比如我写了个重置密码确认按钮的animation动画,动画代码都没问题,但等我输入密码,再点击这个确认按钮,动画没反应,第二次才反应 解决办法已经写到我的公众号,二维码在下面,欢迎关注,谢谢. 本人联 ...

  7. CF 628C --- Bear and String Distance --- 简单贪心

    CF 628C 题目大意:给定一个长度为n(n < 10^5)的只含小写字母的字符串,以及一个数d,定义字符的dis--dis(ch1, ch2)为两个字符之差, 两个串的dis为各个位置上字符 ...

  8. 安装 Ghost 博客和 Nginx

    Ghost 认 node 的版本,所以使用 nvm 更好. 1.安装 nvm: 可以去 github 查看 nvm 的说明,通过:wget -qO- https://raw.githubusercon ...

  9. 论文笔记之：Co-saliency Detection via A Self-paced Multiple-instance Learning Framework

    Co-saliency Detection via A Self-paced Multiple-instance Learning Framework  T-PAMI  2016  摘要:Co-sal ...

  10. 综合使用union和limit区分结果并限制返回结果集的条数

    limit , 这里的limit限制了返回的union(合并)后的结果集,