Vue中使用百度实现定位城市先去百度地图开放平台申请个人密钥http://lbsyun.baidu.com/创建应用选择

先去百度地图开放平台申请个人密钥http://lbsyun.baidu.com/
- 创建应用
- 选择浏览器端
- IP白名单写*，表示所有
在工程目录index.html中引入
- <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script>密匙指：访问应用（AK）
在build/webpack.base.conf.js（与entry同级）中配置 externals:{ "BMap":"BMap" }（VUE3.0以上没有webpack文件，在main.js同级文件下创建vue.config.js文件，写入
```
configureWebpack: {
 externals: {
   'BMap': 'BMap' // 百度地图配置
 }
}  })
```
重新运行一下npm install或者yarn

获取城市

<div>{{LocationCity}}</div>
 export default{
 data(){
     return{
         LocationCity:"正在定位"    //给渲染层定义一个初始值
     }
 },
 mounted(){
     this.city()    //触发获取城市方法
 },
 methods:{
     city(){    //定义获取城市方法
         const geolocation = new BMap.Geolocation();
         var _this = this
         geolocation.getCurrentPosition(function getinfo(position){
             let city = position.address.city;             //获取城市信息
             let province = position.address.province;    //获取省份信息
             _this.LocationCity = city
         }, function(e) {
             _this.LocationCity = "定位失败"
         }, {provider: 'baidu'});		
     }
 }