前提：使用的angular2-baidu-map版本为：2.5.4
1、安装地图插件
npm install angular2-baidu-map 安装
2、在项目src/app/app.module.ts 导入
关键代码如下：
import {BaiduMap} from 'angular2-baidu-map/dist'
@NgModule({
declarations: [
...
BaiduMap
],
entryComponents: [
...
BaiduMap
]
3、具体使用的ts增加代码如下：
import {OfflineOptions, ControlAnchor,NavigationControlType} from 'angular2-baidu-map/dist';
@Component({
selector: 'ion-content',
templateUrl: 'xxx.html'
})
xxxPage implements OnInit{
private opts:any;
private offlineOpts:OfflineOptions;
constructor(private nav: NavController) {
}
ngOnInit() {
this.opts = {
center: {
longitude: 106.523461,
latitude: 29.542407
},
zoom: 15,
geolocationCtrl: {
anchor: ControlAnchor.BMAP_ANCHOR_BOTTOM_RIGHT
},
scaleCtrl: {
anchor: ControlAnchor.BMAP_ANCHOR_BOTTOM_LEFT
},
overviewCtrl: {
isOpen: false
},
navCtrl: {
type: NavigationControlType.BMAP_NAVIGATION_CONTROL_LARGE
}
};
this.offlineOpts = {
retryInterval: 5000,
txt: 'NO-NETWORK'
};
}
loadMap(e: any) {
console.log(e);//e here is the instance of BMap.Map
}
clickMarker(marker: any){
console.log('The clicked marker is', marker);
}
}
4.增加页面代码如下：
5、增加样式如下:
baidu-map{
width: 100%;
height: 100%;
display: block;
}
6、大功告成，效果如下：
