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

时间：2020-04-01 16:04:15 阅读：134 评论：0 收藏：0 [点我收藏+]

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" style="width:100%;height: 500px;overflow:hidden;margin:0;z-index:1000;"></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);
  }  
}