使用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按鈕打開

完成！