[JavaScript知识库]Vue中使用百度API获取地理位置

Vue中使用百度API获取地理位置

• 新建一个文件夹 Map.js

export function MP(ak) {  
  return new Promise(function (resolve, reject) {  
    window.onload = function () {  
      resolve(BMap)  
    }  
    var script = document.createElement("script");  
    script.type = "text/javascript";  
    script.src = "http://api.map.baidu.com/api?v=2.0&ak="+ak+"&callback=init";  
    script.onerror = reject;  
    document.head.appendChild(script);  
  })  
}

• 在VUE中调用，测试环境是将以下代码放在了mounted()中

      // 在session中获取地址
			if(sessionStorage.getItem("address")!=null){
				this.address=sessionStorage.getItem("address");
				console.log("address",this.address);
			}
			else{
        // 等待dom更新完成后执行回调
				this.$nextTick(()=>{
				  //防止在回调函数中使用this有时会不生效，
					var that=this;
          // ak是百度地图开发者平台申请的密钥,需要个人进行申请，最后在局部注册组件时声明
					MP(that.ak).then(BMap=>{
            // Geolocation 定位当前城市信息
						var geolocation = new BMap.Geolocation();
						// 获取当前位置
						geolocation.getCurrentPosition(function getinfo(position){
						        var city = position.address.city; //获取城市信息
						        var province = position.address.province; //获取省份信息
								that.address=province+city
								console.log(that.address);
								//将信息设置到session中
								sessionStorage.setItem("address",that.address);
						    }, function(e) {
						        alert("获取百度定位位置信息失败");
						    }, {provider: 'baidu'});
					})
				})
			}