Vue使用百度地图获取当前城市_localcity

一：申请百度地图密匙

我们需要提前在百度地图开放平台申请密匙才能使用对应的接口去获取城市信息。
百度地图开放平台：http://lbsyun.baidu.com/apiconsole/center#/home

注册登录后需要进行开发者认证

主要是需要登记认证身份证，这环节需要身份证照片，认证很快，基本提交了一下就认证成功了。

创建应用

注意！Referer白名单一定要填写正确，域名不对是无法使用定位功能的！没上线的小伙伴如果仅仅是用来本地测试或者学习的就直接填写*，这样不管是什么域名都可以使用定位功能，但上线了就需要自行更改过来

获取密匙AK

---

二：Vue项目使用

下载相应插件

npm install bmap
1

html文件引入

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=3s9RVp4wDTnCez3eBX3vjisaSlHyAWxE&services=false"></script>
1

创建一个新的js文件（下一步需要引入）

export default {
  init: function (){
    const AK = '3s9RVp........';  //你的AK
    const BMap_URL = "https://api.map.baidu.com/api?v=2.0&ak="+ AK +"&s=1&callback=onBMapCallback";
      return new Promise((resolve, reject) => {
        // 如果已加载直接返回
        if(typeof BMap !== 'undefined') {
          resolve(BMap);
          return true;
        }
        // 百度地图异步加载回调处理
        window.onBMapCallback = function () {
          resolve(BMap);
        };
        let getCurrentCityName = function () {
          return new Promise(function (resolve, reject) {
            let myCity = new BMap.LocalCity()
            myCity.get(function (result) {
              resolve(result.name)
            })
          })
        }
        // 插入script脚本
        let scriptNode = document.createElement('script');
        scriptNode.setAttribute(type, 'text/javascript');
        scriptNode.setAttribute('src', BMap_URL);
        document.body.appendChild(scriptNode);
      });
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

组件引入js并使用

<script>
  import myBMap from './myBMap.js'       //上面定义的js文件
  export default {
  methods: {
      getCity(){
        myBMap.init().then(BMap=>{
          const geolocation = new BMap.Geolocation()
          geolocation.getCurrentPosition((position)=>{
            let city = position.address.city;             //获取城市信息
            let province = position.address.province;     //获取省份信息
            console.log(city)
            console.log(province)
          },(e)=>{
            console.log(e)
            console.log('定位失败')
          }, {provider: 'baidu'})
        })
      },
    },
    mounted () {
      this.getCity()      //调用函数获取城市信息
    }
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

效果