1. 程式人生 > >自定義地圖樣式-例子

自定義地圖樣式-例子

    const map = this.map = new BMap.Map(this.map_container.nativeElement, {
      enableMapClick: true,
      // minZoom: 11,
      // maxZoom : 11
    }); // 建立地圖例項


    // 這裡我們使用BMap名稱空間下的Point類來建立一個座標點。Point類描述了一個地理座標點,其中116.404表示經度,39.915表示緯度。(為天安門座標)

    const point = new BMap.Point(113.922329, 22.49656); // 座標可以通過百度地圖座標拾取器獲取 --萬融大廈
    map.centerAndZoom(point, 19); // 設定中心和地圖顯示級別
    // map.centerAndZoom(new BMap.Point(105.403119, 38.028658), 5);  // 初始化地圖,設定中心點座標和地圖級別
    map.enableScrollWheelZoom(true); // 開啟滑鼠滾輪縮放

    // 地圖自定義樣式
    map.setMapStyle({
      styleJson: [{
        'featureType': 'water',
        'elementType': 'all',
        'stylers': {
          'color': '#044161'
        }
      }, {
        'featureType': 'land',
        'elementType': 'all',
        'stylers': {
          'color': '#091934'
        }
      }, {
        'featureType': 'boundary',
        'elementType': 'geometry',
        'stylers': {
          'color': '#064f85'
        }
      }, {
        'featureType': 'railway',
        'elementType': 'all',
        'stylers': {
          'visibility': 'on'
        }
      }, {
        'featureType': 'highway',
        'elementType': 'geometry',
        'stylers': {
          'color': '#004981'
        }
      }, {
        'featureType': 'highway',
        'elementType': 'geometry.fill',
        'stylers': {
          'color': '#005b96',
          'lightness': 1
        }
      }, {
        'featureType': 'highway',
        'elementType': 'labels',
        'stylers': {
          'visibility': 'on'
        }
      }, {
        'featureType': 'arterial',
        'elementType': 'geometry',
        'stylers': {
          'color': '#004981',
          'lightness': -39
        }
      }, {
        'featureType': 'arterial',
        'elementType': 'geometry.fill',
        'stylers': {
          'color': '#00508b'
        }
      }, {
        'featureType': 'poi',
        'elementType': 'all',
        'stylers': {
          'visibility': 'on'
        }
      }, {
        'featureType': 'green',
        'elementType': 'all',
        'stylers': {
          'color': '#056197',
          'visibility': 'off'
        }
      }, {
        'featureType': 'subway',
        'elementType': 'all',
        'stylers': {
          'visibility': 'on'
        }
      }, {
        'featureType': 'manmade',
        'elementType': 'all',
        'stylers': {
          'visibility': 'off'
        }
      }, {
        'featureType': 'local',
        'elementType': 'all',
        'stylers': {
          'visibility': 'off'
        }
      }, {
        'featureType': 'arterial',
        'elementType': 'labels',
        'stylers': {
          'visibility': 'on'
        }
      }, {
        'featureType': 'boundary',
        'elementType': 'geometry.fill',
        'stylers': {
          'color': '#029fd4'
        }
      }, {
        'featureType': 'building',
        'elementType': 'all',
        'stylers': {
          'color': '#1a5787'
        }
      }, {
        'featureType': 'label',
        'elementType': 'all',
        'stylers': {
          'visibility': 'off'
        }
      }, {
        'featureType': 'poi',
        'elementType': 'labels.text.fill',
        'stylers': {
          'color': '#ffffff'
        }
      }, {
        'featureType': 'poi',
        'elementType': 'labels.text.stroke',
        'stylers': {
          'color': '#1e1c1c'
        }
      }, {
        'featureType': 'administrative',
        'elementType': 'labels',
        'stylers': {
          'visibility': 'on'
        }
      }, {
        'featureType': 'road',
        'elementType': 'labels',
        'stylers': {
          'visibility': 'on'
        }
      }]
    });

參考: