本文展示HTML结构的操作代码示例
—————————————
获取秘钥key:
腾讯位置服务创建实例应用(应用管理->创建应用)
地址:https://lbs.qq.com/dev/console/home
获取腾讯JS:
(产品-地图-地图组件-前端定位组件)
JS地址:https://mapapi.qq.com/web/mapComponents/geoLocation/v/geolocation.min.js
<iframe id="geoPage" width=0 height=0 frameborder=0 style="display:none;" scrolling="no"
src="https://apis.map.qq.com/tools/geolocation?key=key&referer=myapp">
</iframe>
监听事件
mounted:function(){
var that = this;
window.addEventListener('message', function(event) {
var loc = event.data;
console.log(loc);
}, false);
}
返回数据对象
{ "module":"geolocation",
"nation": "中国",
"province": "广东省",
"city":"深圳市",
"district":"南山区",
"adcode":"440305", //行政区ID,六位数字, 前两位是省,中间是市,后面两位是区,比如深圳市ID为440300
"addr":"深圳大学杜鹃山(白石路北250米)",
"lat":22.530001, //火星坐标(gcj02),腾讯、Google、高德通用
"lng":113.935364,
"accuracy":13 //误差范围,以米为单位
}
/*
注意:若定位失败,同样会触发message事件,但返回的event.data为null;
定位失败时,返回时间是不确定的,建议业务调用方可以根据自己的业务场景设置超时逻辑(例如:可以设置6s超时后认为定位失败)。
*/