ionic实现获取当前位置信息

在ionic程序中，如果需要定位用户所在的城市，可以用如下方法。

1.在ionic程序中，引入百度地图API。打开文件： \src\index.html. 在 head tag中，添加如下代码 , 注意将“您的密钥” 替换成 您申请的密钥

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>

2.在需要显示城市信息的页面插入如下代码

<ion-header>
 <ion-navbar color="primary"> 
       <ion-title class="rightFloat" >您所在的城市: {{localCityName}}</ion-title>   
</ion-navbar>
</ion-header>

3.在ionic程序中打开相应页面的.ts文件

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

declare var BMap;
declare var BMapLib;
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})

export class HomePage {
  localCityName: string;
  constructor(public navCtrl: NavController) {

  }

  ionViewDidLoad() { 
    var myCity = new BMap.LocalCity();
    myCity.get(function (result) {
    var cityName = result.name; 
    //使用localStoage存储cityName. 此处不可以使用this.localCityName = cityName; 因为这里的this 指向的是当前的类， 也就是 function(result)这个类
    localStorage.setItem('currentCity', cityName);
    return cityName;
});

//延迟500毫秒取存储在localStorage中的 cityName 
setTimeout(() => {
   this.localCityName = localStorage.getItem('currentCity'); 
}, 500);   
  }
}

通过延迟函数，这样可以确保在map页面第一次加载的时候，localCityName是有值的。当前城市即可显示，而不是显示为空。