使用angular方式在ionic3工程中使用百度地图（typescript语言，移动端编程）

https://www.npmjs.com/package/angular2-baidu-map

这个应该是官方给的一定指导，我也没怎么看。

终端先安装这个包npm install angular2-baidu-map

终端敲ionic g page baidumapang生成page文件夹

由于是自动生成的，不需要在app.module.ts添加头文件，只需要把百度地图的秘钥填入

申请秘钥网址http://lbsyun.baidu.com/apiconsole/key

选择游览器端，不需要花钱

添加秘钥

@NgModule({
  declarations: [
  ],
  imports: [
    BaiduMapModule.forRoot({ak:'你的秘钥'})
  ],
           

在baidumapang.ts文件中中导入头文件

import {
  MapOptions, Point, MarkerOptions, 
  NavigationControlOptions, ControlAnchor,
  NavigationControlType, OverviewMapControlOptions, ScaleControlOptions, MapTypeControlOptions, MapTypeControlType,
  GeolocationControlOptions
} from 'angular2-baidu-map';
           

遵循着有没有用都导入的方式都导入。

baidumapang.ts主要实现一个通过前端输入经纬度进行查询，控制那边我copy的，但是好像不是很好用

export class BaidumapangPage {
  public mapoptions: MapOptions;
  public markers: Array<{ point: Point; options?: MarkerOptions }>;
  public controlOpts: NavigationControlOptions;
  public overviewmapOpts: OverviewMapControlOptions;
  public scaleOpts: ScaleControlOptions;
  public mapTypeOpts: MapTypeControlOptions;
  public geolocationOpts: GeolocationControlOptions;
     setlng:number =118.719438;//经度
     setlat:number = 32.209020;//纬度

  constructor(public navCtrl: NavController,
              public navParams: NavParams ) {
//地图显示的中心位置
              this.mapshow();
              this.pointshow();
  }

  mapshow(){
    this.mapoptions = {
      centerAndZoom: {
        lng: this.setlng,   // 经度
        lat: this.setlat,    // 纬度
        zoom: 16,    //大概是调地图缩放的大小
      },
      enableKeyboard: true,
    }  
  }

  pointshow(){
    console.log("111");
    // 这是地图标记marker
    this.markers = [
      {
        options: {
          icon: {
            imageUrl: 'assets/timg.png',
            size: {
              height: 60,
              width: 50
            }
          },
          title: 'a111'
        },
        point: {
          lng: this.setlng,   // 经度
          lat: this.setlat,    // 纬度
        }
      },
    ];
  }

  location(){
    this.mapshow();
    this.pointshow();
  }

  mapcontrol(){
    this.controlOpts = {         // 导航控件
    anchor: ControlAnchor.BMAP_ANCHOR_TOP_LEFT,      // 显示的控件的位置
    type: NavigationControlType.BMAP_NAVIGATION_CONTROL_LARGE,   // 用来描述它是什么样的导航
    offset: {                                        // 控件的大小
      width: 30,
      height: 30
      },
    showZoomInfo: true,                             // 是否展示当前的信息
    enableGeolocation: true                         // 是否启用地理定位功能
    };
    this.overviewmapOpts = {    // 地图全景控件
    anchor: ControlAnchor.BMAP_ANCHOR_BOTTOM_RIGHT,  // 显示的控件的位置
    isOpen: true                                    //
    };
    this.scaleOpts = {          // 比例尺控件
    anchor: ControlAnchor.BMAP_ANCHOR_BOTTOM_LEFT
    };
    this.mapTypeOpts = {        // 地图类型
    type: MapTypeControlType.BMAP_MAPTYPE_CONTROL_HORIZONTAL
    };
  // Geolocation 和Panorama 没有属性
}
}
           

由于angular方法我怎么都用不了百度地图自带的红色小箭头的那个定位图标，然后我就上网下了个，然后用Photoshop把背景图片做空（？？？我到底是干啥的） ，这里要注意图标的相对地址，我试了好几次，google调试时候没问题，打包到手机上图裂了，这个应该是对的。

前端baidumapang .html

<ion-header>
  <ion-navbar>
  <ion-title>
    地图
  </ion-title>
</ion-navbar>
</ion-header>

<ion-content padding>
   <baidu-map [options]="mapoptions" class="map_container">
      <marker *ngFor="let marker of markers" [point]="marker.point" [options]="marker.options"></marker> 
      <!--导航控件-->
    <control type="navigation" [options]="controlOpts"></control>
    <!--地图全景控件-->
    <control type="overviewmap" [options]="overviewmapOpts"></control>
    <!--比例尺-->
    <control type="scale" [options]="scaleOpts"></control>
    <!--地图类型-->
    <control type="maptype" [options]="mapTypeOpts"></control>
 
    <control type="geolocation" [options]="geolocationOpts"></control>

    </baidu-map>
      <ion-item>
      <ion-label color="primary">经度</ion-label>
      <ion-input placeholder=" longitude Input"[(ngModel)]="setlng"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label color="primary">经度</ion-label>
      <ion-input placeholder=" latitude Input"[(ngModel)]="setlat"></ion-input>
    </ion-item>
       <button ion-button color="primary" block (click)="location()">定 位</button>
</ion-content>
           

设立按钮，点击调用后端location()函数进行定位 ，初始值是后端程序给的。

最后scss里面样式

page-baidumapang {
    .map_container{
        display: block;
        width: 100%;
        height: 90%;
      }
    //这个用来隐藏百度地图的logo
    .anchorBL{
        display: none;
      }
}
           

 效果图

 通过地图angular按钮打开

完成！