首先在ionic的\src\index.html文件中调用百度地图的api
<script type="text/javascript" src="http://api./api?v=2.0&ak=gYgULa1jV7bufpSpfcDjeIxBrEWmhmhy"></script>
在ionic项目中打开终端，输入ionic g page home-map，就可以创建一个新的页面home-map（可自定义）页面，在home-map.html中添加如下代码
<ion-header><ion-navbar><ion-title>位置信息</ion-title></ion-navbar></ion-header><ion-content><div #mapcon id="map_container"></div><!-- 地图 --><!-- 底部具体的跳转地址--><div class="map-search" id="map-search"><div class="map_location"><b>[位置]</b><p class="map_address">西安市中心医院体检中心</p></div><div class="map_link"><a href="/mobile/webapp/place/linesearch/foo=bar/end=word=陕西中医医院"></a></div></div></ion-content>
在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并定位当前位置的全部过程。
出来的效果如下图：
