在Ionic上通过百度地图来定位当前城市，获取城市名称

在我们很多实际的项目中，都需要定位用户当前所处的城市来获取一些个性化的服务，接下来我就带领大家通过百度地图开放平台提供的服务来完成这个功能。

获取百度地图开放平台提供的能力

百度地图开放平台的网址是：http://lbsyun.baidu.com/

在开放平台的控制台里面，创建自己的应用，然后就能得到一个AK，也就是AccessKey。这里不讨论步骤了。

集成百度地图到我们的应用中

把下面这段代码添加到你项目index.html文件的头部，记得把这里的"你的密钥"换成你自己申请的AK密钥。

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

然后在需要使用定位的页面的ts文件中编写如下的代码，我这里放在tab3.page.ts这个页面中，我就直接把全部的代码放在下面了：

import { Component, OnInit } from '@angular/core';
declare var BMap;

@Component({
  selector: 'app-tab3',
  templateUrl: 'tab3.page.html',
  styleUrls: ['tab3.page.scss']
})
export class Tab3Page implements OnInit{
  // 城市名称
  public cityName: string;

  constructor() {}

  ngOnInit() {
    const myCity = new BMap.LocalCity();
    myCity.get((result: any) => {
    this.cityName = result.name;
    // 在控制台打印出城市名称
    console.log(this.cityName);
    });
  }
}

实际的代码是非常简单的，核心代码我都放在了ngOnInit里面，你可以按照自己的需要来放置。

为了更直观的看见效果我在tab3.page.html中绑定了cityName,刷新页面就可以看到当前城市名称了，代码如下：

<ion-header [translucent]="true">
  <ion-toolbar>
    <ion-title>
      Tab 3
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content [fullscreen]="true">
  <ion-label>当前城市：{{cityName}}</ion-label>
</ion-content>

实现效果

当我刷新页面，重新进入页面的时候，控制台打印出了我当前的城市名称，页面上也展示出了我的城市名称：

总结

总的来说实现起来很简答。关键就是要去申请百度的那个AK，然后别的都简单。如果你遇到了什么问题，不要责怪我，请立即与我联系，我来帮你解决。