ionic3使用百度地图

来源：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,    // 纬度
            }
          }
        ]
  }
}