来源:https://www.npmjs.com/package/angular2-baidu-map
1、安装地图插件
npm install angular2-baidu-map 安装
2、在项目src/app/app.module.ts 导入
import { BaiduMapModule } from 'angular2-baidu-map'
//@NgModule的imports添加BaiduMapModule.forRoot({ak:'放入百度地图的密钥'})
imports: [
BaiduMapModule.forRoot({ak:'放入百度地图的密钥'})
],
3.html代码
<ion-content>
<baidu-map [options]="options" class="map_container">
<marker *ngFor="let marker of markers" [point]="marker.point" [options]="marker.options"></marker>
</baidu-map>
</ion-content>
4.scss代码
.map_container{
display: block;
width: 100%;
height: 100%;
}
//这个用来隐藏百度地图的logo
.anchorBL{
display: none;
}
5.ts代码
import { NavController } from 'ionic-angular';
import { MapOptions} from 'angular2-baidu-map';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage{
public options: MapOptions;
markers;
constructor(public navCtrl: NavController) {
//地图显示的中心位置
this.options = {
centerAndZoom: {
lng: 116.46, // 经度
lat: 39.92, // 纬度
zoom: 16, //大概是调地图缩放的大小
},
enableKeyboard: true
}
//地图上显示的点
this.markers = [
{
options: {
icon: {
imageUrl: './assets/imgs/coordinate1.png',
size: {
height: 32,
width: 32
}
},
title: 'new'
},
point: {
lng: 116.46, // 经度
lat: 39.92, // 纬度
}
}
]
}
}