Vue：获取当前定位城市名-CSDN博客

博客介绍了通过定位获取当前所在城市名的实现方法。包括在工程目录index.html中引入相关内容，在webpack配置文件中配置，重新运行npm install或yarn，在需要的页面引入百度地图对象BMap，最后获取城市，还给出了html和js部分代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

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

转载于:https://www.cnblogs.com/ruoyaozhan/p/11068211.html