Vue:获取当前定位城市名

时间:2022-12-16 20:32:38

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

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同级)中配置:

 

entry:{
    app:'./src/main.js'
},
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'});		
        }
    }
}

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