效果图
1、安装
npm install angular2-baidu-map --save2、在主模块中注册 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() {// 配置地图, 参考百度地图apithis.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-mapak="8azVgQbZR9irKHBOsqMzi8CAT7l1gtjt"[options]="opts"[offline]="offlineOpts"(onMapLoaded)="loadMap($event)"(onMarkerClicked)="clickMarker($event)"
></baidu-map>
