Vue：获取当前定位城市名

最新推荐文章于 2025-05-27 17:03:00 发布

雨雪风晴是你

最新推荐文章于 2025-05-27 17:03:00 发布

阅读量1.4w

点赞数 7

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： Vue 获取城市百度地图api 定位

本文链接：https://blog.youkuaiyun.com/weixin_42941619/article/details/85346681

Vue 专栏收录该内容

21 篇文章

订阅专栏

本文介绍如何利用百度地图API在Vue项目中获取用户的当前位置信息，包括城市和省份。通过在index.html中引入百度地图API并配置webpack，再在需要的城市定位页面中调用BMap.Geolocation方法，实现精准定位。

摘要生成于 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同级）中配置：

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

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