Vue - 调用腾讯地图获取当前坐标

调用腾讯地图获取当前坐标（火星坐标）

• Step1： 创建一个腾讯位置服务的key密钥
  https://lbs.qq.com/dev/console/key/manage
  
  
  

• Step2：因需要跨域，可先安装vue-jsonp

cnpm install vue-jsonp --save

ps：我用的是淘宝镜像，故为cnpm，用npm的直接替换就ok

• Step3：在main.js中导入vue-jsonp

import { VueJsonp } from 'vue-jsonp'
Vue.use(VueJsonp);

• Step4：使用vue-json
  在需获取定位页面代码的create(){}中添加一下代码获取坐标（含经纬度）

created() {
	/**
	 * 获取定位
	 */
	let data = {
		key: "xxxxxxxxxxxxx" //申请的密钥
	};
	let url = "https://apis.map.qq.com/ws/location/v1/ip"; //这个就是地理位置信息的接口
	data.output = "jsonp";
	this.$jsonp(url, data)
		.then(res => {
		  console.log(res);
		  this.position.latitude = res.result.location.lat;
		  this.position.longitude = res.result.location.lng;
		  console.log(this.position);
		})
		.catch(error => {
		  console.log(error);
		});
}

获取结果：

纯经验分享，有误请指正。