需求:vue项目 在小程序中,需要在h5页面获取当前位置的详细信息
在index.html页面添加如下链接
在页面代码中
<script charset="utf-8" src="https://apis.map.qq.com/tools/geolocation/min?key=xxxxxxx&referer=xxxxxxxx"></script>
<script src="https://gw.alipayobjects.com/as/g/h5-lib/alipayjsapi/3.1.1/alipayjsapi.min.js"> </script>
// h5 获取定位
getMyLocation() {
let vm = this;
let TMapAPPName = "";
let TMapKEY = "";//你的腾讯地图密钥
let geolocation = new qq.maps.Geolocation(
TMapKEY,
TMapAPPName
);
/**
* getLocation(sucCallback, errCallback, [options: {timeout: number, failTipFlag: boolean}])
* sucCallback为定位成功回调函数,必填;
* errCallback为定位失败回调函数,选填,如果不填,请设为null;
* options为定位选项,选填,可以通过timeout参数设置定位的超时时间,默认值为10s;
* failTipFlag: 是否在定位失败时给出提示引导用户打开授权或打开定位开关。(即将支持)
*/
let options = {
timeout: 9000,
failTipFlag: true,
};
geolocation.getLocation(
function (position) {
console.log("定位成功" + vm.geoTimes + " current_location", position);
vm.location=position.addr
vm.latitude=position.lat
vm.longtitude=position.lng
},
function (err) {
vm.location='xx市'
vm.latitude=xx //给个默认的经纬度信息,注意不是字符串是number类型
vm.longtitude=xx
},
options
);
},