ionic 使用百度地图API, 定位用户当前所在的城市示例

Posted caiyaming

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ionic 使用百度地图API, 定位用户当前所在的城市示例相关的知识,希望对你有一定的参考价值。

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

  1. 在ionic程序中,引入百度地图API。打开文件: srcindex.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 程序中 ,打开文件 srcpagesmapmap.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的问题。 如何您有更好的办法,欢迎留言讨论。

技术分享图片

以上是关于ionic 使用百度地图API, 定位用户当前所在的城市示例的主要内容,如果未能解决你的问题,请参考以下文章

百度地图api将可视区域定位到当前所在位置

geolocation/ 百度地图api Geolocation 定位当前城市信息

利用百度地图API获取用户浏览器所在省市区

android 版百度地图如何通过定位功能获得当前的位置所在的城市?

百度地图api之----根据用户ip定位城市

ionic cordova 引用百度地图以及利用手机GPS定位