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

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

作者：雨雪风晴是你
来源：优快云
原文：https://blog.youkuaiyun.com/weixin_42941619/article/details/85346681
版权声明：本文为博主原创文章，转载请附上博文链接！