在ionic程序中，如果需要定位用户所在的城市，可以用如下方法。
-
在ionic程序中，引入百度地图API。打开文件： \src\index.html. 在 head tag中，添加如下代码 , 注意将“您的密钥” 替换成 您申请的密钥
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>
-
我这边假设您已经创建了map页， 并将map module 加载到app module中。（如此处不明白，参考这篇文章https://www.jianshu.com/p/a7b4bcb5bd66） 前端显示。这里我把城市名放在页面的Header上。
<ion-header> <ion-navbar color="primary"> <ion-title class="rightFloat" >您所在的城市: {{localCityName}}</ion-title> </ion-navbar> </ion-header> -
在ionic 程序中 ，打开文件 \src\pages\map\map.ts ， 以下代码实现的是 加载城市名称。
declare var BMap; declare var BMapLib; @IonicPage() @Component({ selector: 'page-map', templateUrl: 'map.html', }) export class MapPage { 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是有值的。当前城市即可显示，而不是显示为空。
使用setTimeout延迟函数就是为了解决页面第一次加载时，localCityName为null的问题。 如何您有更好的办法，欢迎留言讨论。
image.png
