Vue =＞在vue项目中使用百度地图API，根据经纬度获取省市区具体名称

最新推荐文章于 2025-06-18 15:22:08 发布

不停喝水

最新推荐文章于 2025-06-18 15:22:08 发布

阅读量1.7k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： # 【Vue2从基础到进阶】文章标签： vue.js 百度 javascript

本文链接：https://blog.csdn.net/weixin_48200589/article/details/119780778

【Vue2从基础到进阶】专栏收录该内容

64 篇文章

订阅专栏

本文介绍了如何在Vue项目中集成百度地图API，通过获取用户当前地理位置信息，展示地址解析。首先，需要在百度地图开放平台注册并获取AK。然后，在Vue项目的`index.html`中引入百度地图JS库，并将AK替换为个人的AK。接着，在Vue组件中利用Geolocation对象获取坐标，并通过Geocoder进行地址解析，输出省市区信息。

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

1、在百度地图开放平台注册账号并登录

网址：http://lbsyun.baidu.com/index.php?title=jspopularGL

2、在我们的vue项目中的public文件夹下的index.html中引入并记得替换上你的ak

<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=你的ak"></script>

3.vue页面

methods：
getLocation() {
            var geolocation = new BMap.Geolocation();
            geolocation.getCurrentPosition(function(e){
                if(this.getStatus() == BMAP_STATUS_SUCCESS){
                    var geoc = new BMap.Geocoder()
                    // 百度 geolocation 的经纬度属性不同，此处是 point.lat 而不是 coords.latitude
                    let LocationProvince = e.address.province
                    let LocationCity = e.address.city
                    console.log(LocationProvince,LocationCity)
                }else{
                    this.getStatus();
                }
            })
        },