Vue：获取当前定位城市名

实现思想：通过定位获取到当前所在城市名；

1、在工程目录index.html中引入：

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

ps：秘钥可以去百度开发者平台申请

2、在build/webpack.base.conf.js（与entry同级）中配置：

externals:{
    "BMap":"BMap"
},

 

3、重新运行一下npm install或者yarn；

4、配置好以后到对应需要获取城市名的页面引入百度地图对象 BMap：

import BMap from 'BMap'

5、获取城市：

html部分

<div>{{LocationCity}}</div>       <!-- 渲染层 -->

js部分

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'});		
        }
    }
}

以上便是获取当前城市的代码，如果存在问题，希望各位光头，哦不，是各位程序猿朋友提出，我会依据自己能力，给予大家帮助，同时优化代码。