ionic 4集成百度地圖以及出坑指南

1.集成步驟

（1）ionic內index.html頁面添加百度地圖js引用

<script src="https://api.map.baidu.com/getscript?v=2.0&ak=百度地圖ak"> </script>

百度地圖ak申請步驟

（2）顯示百度html界面

<ion-content>
  <div #map id="map_container"></div>
</ion-content>

（3）顯示百度地圖ts文件方法

import { Component, ViewChild, ElementRef } from '@angular/core';
import { Geolocation } from '@ionic-native/geolocation';
import { NavController, NavParams } from '@ionic/angular';

declare var BMap: any;

@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss']
})
export class Tab1Page {
  // 創建視圖
  // tslint:disable-next-line: variable-name
  @ViewChild('map', { static: false }) private map_container: ElementRef;
  // 地圖對象
  map: any;  // 用來控制watchposition，以便在退出頁面的時候關閉
  constructor() { }
  //在進入頁面的時候觸發
  ionViewDidEnter() {
    const map = this.map = new BMap.Map(this.map_container.nativeElement, { enableMapClick: true });  //創建地圖實例
    map.addControl(new BMap.MapTypeControl()); //添加地圖類型
    const point = new BMap.Point(116.404, 39.915);
    // 初始化地圖，設置中心點坐標和地圖級別
    map.centerAndZoom(point, 15);
    // 開啟鼠標滾輪縮放
    map.enableScrollWheelZoom(true);
  }  
}

2.出坑指南

（1）電腦顯示，手機不顯示

在電腦上顯示，但是在手機上不能顯示，在該處需要使用Chrome非原生app調試工具，使用方法，通過調試發現提示BMap is not undefined,如下圖所示：

 

 

 解決方法參考地址

解決方案

 

 

（2）手機顯示百度地圖黃色背景色塊，但是地圖還是不能正常加載

在Chrome工具中調試發現，Android net::ERR_CLEARTEXT_NOT_PERMITTED無法加載url

解決方法，暫時采用的是第三種解決方案

 

（3）去除Logo

 網上大多有兩種方式：

1.添加樣式【特別聲明，樣式要添加在全局樣式里邊，不要放在局部樣式文件里，不要問我原因，我也不知道】：

 .anchorBL{
    display: none !important;
  }

 

 

2.元素上移，遮擋logo區域；