在vue项目中使用百度地图获取当前城市

在vue项目中使用百度地图获取当前城市

本文转载 https://www.jianshu.com/p/0819cfd46712

第一步在index.html中引入

<script src="http://api.map.baidu.com/api?v=2.0&ak=你自己的访问应用（AK）"></script>

第二步 在公共文件里面创建一个getUserLocation.js,文件内容如下：

//百度地图获取城市名称的方法
let getCurrentCityName = function () {
    return new Promise(function (resolve, reject) {
        let myCity = new BMap.LocalCity()
        myCity.get(function (result) {
            resolve(result.name)
        })
    })
}
export default getCurrentCityName

第三步 在需要的vue文件内使用

import getCurrentCityName from 'common/js/getUserLocation'
method: {
    //通过百度地图获取当前城市
        getCurrentCity() {
            getCurrentCityName().then((city) => {
              console.log(city);  //顺利的话能在控制台打印出当前城市
            })
        }
}

mounted(){
       this.getCurrentCity()
}

如果是刚申请的APi会有一个问题
百度未授权使用地图API，可能是因为您提供的密钥不是有效的百度LBS开放平台密钥，或此密钥未对本应用的百度地图JavaScriptAPI授权。您可以访问如下网址了解如何获取有效的密钥：http://lbsyun.baidu.com/apiconsole/key#。

百度在更新服务器，等个几小时就好了