效果图

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