angular2-baidu-map网站中使用百度地图

效果图

1、安装

npm install angular2-baidu-map --save

2、在主模块中注册 app.module.ts

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

组件中导入
declarations: [
    BaiduMap
]

3、创建组件使用地图 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);
  }

}

4、模板文件，注意，这里需要在百度地图api注册key

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