百度地圖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

類代碼html

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。