自定義地圖樣式-例子
阿新 • • 發佈:2018-12-22
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' } }] });
參考: