ionic2、ionic3如何使用百度地图

前提：使用的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、大功告成，效果如下：