调用腾讯地图获取当前坐标(火星坐标)
-
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);
});
}
获取结果:
纯经验分享,有误请指正。