百度地图API示例之设置地图显示范围

时间 2019-11-25

标签百度地图 api 示例设置显示范围繁體版

原文原文链接

代码javascript

<!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_mincss

/**
* @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;
     };

})();html