angular2-baidu-map網站中使用百度地圖

效果圖

一、安裝

npm install angular2-baidu-map --save

二、在主模塊中註冊 app.module.ts

import {BaiduMap} from "angular2-baidu-map";

組件中導入
declarations: [
    BaiduMap
]

三、建立組件使用地圖 baidu.component.ts

import {Component, OnInit} from '@angular/core';
import {OfflineOptions, ControlAnchor, NavigationControlType} from 'angular2-baidu-map';

@Component({
  selector: 'map-presentation',
  templateUrl: "../templates/baidu.component.html",
  styles: [`
        baidu-map{
            width: 100%;
            height: 500px;
            display: block;
        }
    `]
})
export class BaiduComponent implements OnInit {

  opts:any;
  offlineOpts:OfflineOptions;

  ngOnInit() {
    // 配置地圖, 參考百度地圖api
    this.opts = {
      // 地圖中心座標
      center: {
        longitude: 116.4177150000,
        latitude: 40.0612540000
      },
      zoom: 17,
      // 地圖上的座標
      markers: [{
        longitude: 116.4177150000,
        latitude: 40.0612540000,
        title: '華泰汽車集團',
        content: '朝陽區立水橋',
        autoDisplayInfoWindow: true
      }],
      geolocationCtrl: {
        anchor: ControlAnchor.BMAP_ANCHOR_BOTTOM_RIGHT
      },
      scaleCtrl: {
        anchor: ControlAnchor.BMAP_ANCHOR_BOTTOM_LEFT
      },
      overviewCtrl: {
        isOpen: true
      },
      navCtrl: {
        type: NavigationControlType.BMAP_NAVIGATION_CONTROL_LARGE
      }
    };

    this.offlineOpts = {
      retryInterval: 5000,
      txt: '沒有網絡'
    };
  }

  // 剛加載加載地圖信息
  loadMap(e:any) {
    console.log(e);
  }

  // 單機地圖座標, 打印信息
  clickMarker(marker:any) {
    console.log(marker);
  }

}

四、模板文件，注意，這裏須要在百度地圖api註冊key

<baidu-map
  ak="8azVgQbZR9irKHBOsqMzi8CAT7l1gtjt"
  [options]="opts"
  [offline]="offlineOpts"
  (onMapLoaded)="loadMap($event)"
  (onMarkerClicked)="clickMarker($event)"
></baidu-map>