ionic3使用百度地图API并定位当前位置

首先在ionic的\src\index.html文件中调用百度地图的api

在ionic项目中打开终端，输入ionic g page home-map，就可以创建一个新的页面home-map（可自定义）页面，在home-map.html中添加如下代码

  
    位置信息
  



  


  
  

    

      [位置]
      
西安市中心医院体检中心
    
    

      
    
  

在home-map.scss文件中添加样式

 #map_container{
    margin:0;
    height:100%;
    width:100%;
    font-size:1.2px;
  }
.map-search{
    width: 100%;
    height: auto;
    position: fixed;
    bottom: 0px;
    background: #fff;
    overflow: hidden;
    padding: 8px 16px;
  }
  .map_location{
    width: 80%;
    float: left;
    font-size: 1.3rem;
  }
  .map_address{
    padding-top: 10px;
  }
  .map_link{
    width: 20%;
    float: left;
    overflow: hidden;
    text-align: right;
  }
  .map_link a{
    width: 50px;
    height: 50px;
    display: inline-block;
    background-image: url("../../../assets/imgs/map_icon.png");
    background-size: 100% 100%;
  }

home-map.ts文件中使用百度api写入方法

import { Component,ViewChild,ElementRef } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
declare var BMap;  //引入地图

@IonicPage()
@Component({
  selector: 'page-home-map',
  templateUrl: 'home-map.html',
})
export class HomeMapPage {
  @ViewChild('mapcon') map_container: ElementRef;
  // 展示百度地图
  longitude:any; //经度
  latitude:any；//纬度
  addressName:any;
  map: any;//地图对象
  marker: any;//标记
  constructor(public navCtrl: NavController, public navParams: NavParams) {
  }

  ionViewDidLoad() {

    console.log('ionViewDidLoad HomeMapPage');

    this.longitude = '108.959122';
    this.latitude = '34.219873';
    this.addressName = '大雁塔位置'; 
    let map = this.map = new BMap.Map(this.map_container.nativeElement, { enableMapClick: true });//创建地图实例
    let point = new BMap.Point(this.longitude, this.latitude);//坐标可以通过百度地图坐标拾取器获取
    map.centerAndZoom(point,14);//设置中心和地图显示级别
    map.addControl(new BMap.MapTypeControl());
    map.addControl(new BMap.NavigationControl());
    map.enableScrollWheelZoom(false);//启动滚轮放大缩小，默认禁用
    map.enableContinuousZoom(true);//连续缩放效果，默认禁用
    // map.disableDragging(true);     //禁止拖拽
    map.clearOverlays();
  }

}

以上就是inioic3调用百度地图api并定位当前位置的全部过程。

出来的效果如下图：