vue用百度地图获取当前位置（城市）

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

原创最新推荐文章于 2025-05-27 17:03:00 发布 · 6.7k 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#vue技术

碰到的坑专栏收录该内容

20 篇文章

订阅专栏

博客介绍了在项目中配置百度地图的方法。首先在index.html中引入js并申请百度密匙，接着新建地图专用js文件进行初始化配置，最后在需要用的组件里引用和调用。该方法只需三步，实用且可解决诸多示例存在的问题。

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

在这里x插入图片描述
先写入BMap，再npm install–这个配置说明可百度–这里顺便提一下，不是很详细

1：index.html 中引入js（百度的密匙自己百度一下，申请就好了）
http://api.map.baidu.com/api?v=2.0&ak=你的密匙"
2：新建一个js文件–地图专用
export default {
init: function (){
const AK = ‘你的密匙’;
const BMap_URL = 'https://api.map.baidu.com/api?v=2.0&ak=’+ AK +"&s=1&callback=onBMapCallback";
return new Promise((resolve, reject) => {
// 如果已加载直接返回
if(typeof BMap !== “undefined”) {
resolve(BMap);
return true;
}
// 百度地图异步加载回调处理
window.onBMapCallback = function () {
resolve(BMap);
};
let getCurrentCityName = function () {
return new Promise(function (resolve, reject) {
let myCity = new BMap.LocalCity()
myCity.get(function (result) {
resolve(result.name)
})
})
}
// 插入script脚本
let scriptNode = document.createElement(“script”);
scriptNode.setAttribute(“type”, “text/javascript”);
scriptNode.setAttribute(“src”, BMap_URL);
document.body.appendChild(scriptNode);
});
}
}
3：需要用的组件里开始引用和调用
写在方法里，在mounted里调用–下面代码不可少
在这里插入图片描述
city(){
map.init().then(BMap =>{
const locationCity = new BMap.Geolocation();
var that = this;
locationCity.getCurrentPosition(

	          function getinfo(options){
	            let city = options.address.city;    //此处拿到位置相关信息
	            that.LocationCity = city;
	            console.log(options)
	          },
	          function (e){
	            that.LocationCity = '定位失败';
	            console.log('定位失败')
	          },
	          {provider: 'baidu'}
	        )
	      })
},

只需三步就行，看了好多例子都是有问题，这个很实用，欢迎留言，多多交流