在Angular4中使用ng2-baidu-map詳解

1、引言

以前在Angular4使用過百度地圖，記錄一下踩過的坑

2、實現

1.安裝

npm install angular2-baidu-map

2.在app.module.ts配置

ak key在http://lbsyun.baidu.com/apiconsole/key中建立

import { BrowserModule } from '@angular/platform-browser'
import { NgModule } from '@angular/core'

import { AppComponent } from './app.component'

import { BaiduMapModule } from 'angular2-baidu-map'

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, BaiduMapModule.forRoot({ ak: 'your ak' })],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

3.在app.component.html使用

<div style="height: 500px;width: 900px;" >
  <baidu-map [options]="opts" >
    <!--<marker [point]="point" [options]="markOpts" (loaded)="" (clicked)=""></marker>-->
    <marker *ngFor="let marker of markers" [point]="marker.point" [options]="marker.options"></marker>
    <!--導航控件-->
    <control type="navigation" [options]="controlOpts"></control>
    <!--地圖全景控件-->
    <control type="overviewmap" [options]="overviewmapOpts"></control>
    <!--比例尺-->
    <control type="scale" [options]="scaleOpts"></control>
    <!--地圖類型-->
    <control type="maptype" [options]="mapTypeOpts"></control>
 
    <control type="geolocation" [options]="geolocationOpts"></control>
  </baidu-map>
</div>

4.在app.component.ts

import {Component, OnInit} from '@angular/core';
 
import {
  MapOptions, Point, MarkerOptions, NavigationControlOptions, ControlAnchor,
  NavigationControlType, OverviewMapControlOptions, ScaleControlOptions, MapTypeControlOptions, MapTypeControlType,
  GeolocationControlOptions
} from 'angular2-baidu-map';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.sass']
})
export class AppComponent {
 
  public opts: MapOptions;
  public markers: Array<{ point: Point; options?: MarkerOptions }>;
  public controlOpts: NavigationControlOptions;
  public overviewmapOpts: OverviewMapControlOptions;
  public scaleOpts: ScaleControlOptions;
  public mapTypeOpts: MapTypeControlOptions;
  public geolocationOpts: GeolocationControlOptions;
  // 文字標註
  public text: string;
  public onMarkerLoad(marker: any) {
    const label = new window.BMap.Label(’文字標註‘, {
      offset: new window.BMap.Size(20, -12)
    });
    label.setStyle({
      border: '1px solid #d81e06',
      color: '#d81e06',
      fontSize: '10px',
      padding: '1px'
    });
    marker.setLabel(label);
  }
  constructor() {
    this.opts = {
      centerAndZoom: {     // 設置中心點和縮放級別
        lng: 120.62,   // 經度
        lat: 31.32,    // 緯度
        zoom: 15           // 縮放級別
      },
      minZoom: 3,  // 最小縮放級別的地圖
      maxZoom: 19, // 最大縮放級別的地圖
      enableHighResolution: true,  // 是否用高分辨率的地圖，default：true
      enableAutoResize: true,  // 是否能夠自動調整大小，default：true
      enableMapClick: true,  // 地圖是否能夠點擊，default：true
      disableDragging: false, // 是否禁用地圖拖動功能
      enableScrollWheelZoom: true, // 是否啓用滾輪進行縮放功能
      disableDoubleClickZoom: false, // 是否禁用雙擊縮放功能
      enableKeyboard: true,  // 是否啓用鍵盤移動地圖功能
      enableInertialDragging: false,     // 是否啓用慣性阻力函數
      enableContinuousZoom: true,  // 是否啓用連續縮放功能
      disablePinchToZoom: false,   // 是否禁用縮放功能的縮放
      cursor: '',         // 設置默認的光標樣式,應該遵循CSS規範
      draggingCursor: '', // 設置默認的拖動光標樣式，應該遵循CSS規範
      currentCity: '蘇州市',   // 設置當前的城市
    };
 
    // 這是地圖標記marker
    this.markers = [
      {
        options: {
          icon: {
            imageUrl: '/assets/1.jpg',
            size: {
              height: 60,
              width: 50
            }
          },
          title: 'asdkjgaslfkjasd'
        },
        point: {
          lng: 120.62,   // 經度
          lat: 31.32,    // 緯度
        }
      },
      {
        point: {
          lng: 120.63,   // 經度
          lat: 31.32,    // 緯度
        }
      },
      {
        point: {
          lng: 120.63,   // 經度
          lat: 31.31,    // 緯度
        }
      }
    ];
    // 這是控件control
    this.controlOpts = {         // 導航控件
      anchor: ControlAnchor.BMAP_ANCHOR_TOP_LEFT,      // 顯示的控件的位置
      type: NavigationControlType.BMAP_NAVIGATION_CONTROL_LARGE,   // 用來描述它是什麼樣的導航
      offset: {                                        // 控件的大小
        width: 30,
        height: 30
      },
      showZoomInfo: true,                             // 是否展現當前的信息
      enableGeolocation: true                         // 是否啓用地理定位功能
    };
    this.overviewmapOpts = {    // 地圖全景控件
      anchor: ControlAnchor.BMAP_ANCHOR_BOTTOM_RIGHT,  // 顯示的控件的位置
      isOpen: true                                    
    };
    this.scaleOpts = {          // 比例尺控件
      anchor: ControlAnchor.BMAP_ANCHOR_BOTTOM_LEFT
    };
    this.mapTypeOpts = {        // 地圖類型
      type: MapTypeControlType.BMAP_MAPTYPE_CONTROL_HORIZONTAL
    };
    // Geolocation 和Panorama 沒有屬性
  }
}

效果預覽