vue获取地理位置自动定位---腾讯地图

前两天因为工作需求需要获取地理位置

打开腾讯地图定位

找到控制台

选择新建应用

应用名称和类型选择好了后

添加key

这里就获取到了定位

在vue视图中需要定位的

  <div class="locationWrapper" @click="getPosition">
  <span class="address">{{(province+city)||'请选择所在区域'}}</span>

 js代码

	export default{
		name:'Header',
		data(){
			return{
				longitude:0,//经度
				latitude:0,//维度
				city:'',//城市
				province:''//省
			}
		},
		mounted() {
			//
			this.getLocation()
		},
		methods:{
			//获取定位
		getLocation(){
			var geolocation = new window.qq.maps.Geolocation("WVRBZ-RMI6R-S46WU-WARXB-6V4WO-UWBIO", "myapp");
			geolocation.getLocation(this.showPosition, this.errorPosition);
			
		},
		showPosition(position){
			console.log(position);
			this.longitude=position.lng;
			this.latitude=position.lat;
			this.city=position.city;
			this.province=position.province;
		},
		errorPosition(){
			console.log('定位失败');
			//继续定位
			this.getLocation();
		},
		getPosition(){//点击一次获取一次
			this.getLocation()
		}
		}
	}

在vue的public里面的index.html里面加入以下script代码

<script type="text/javascript" src="https://mapapi.qq.com/web/mapComponents/geoLocation/v/geolocation.min.js"></script>