vue用百度地图获取当前位置(城市)

在这里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'}
	        )
	      })
},

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

  • 6
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 9
    评论
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值