ionic 使用百度地圖API， 定位用戶當前所在的城市示例

在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. 我這邊假設您已經創建了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>
    

    

3. 在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的問題。 如何您有更好的辦法，歡迎留言討論。