在近期的一个项目中制作了一个自助机设备导航,根据目前用户定位信息,按照距离由近到远展示自助机设备。
页面是用vue制作的,在代码中使用:
<script src="https://mapapi.qq.com/web/mapComponents/geoLocation/v/geolocation.min.js"></script>
let geolocation = new qq.maps.Geolocation(“密钥key", "mapqq", { timeout: 10000,failTipFlag:true });
geolocation.getLocation(this.showPosition, this.showErr)
showPosition(position) {
console.log(position)
const { lng, lat } = position
this.lng = lng
this.lat = lat
this.getDeviceList()
this.initMap(lat, lng)
},
showErr(error) {
console.log('定位失败')
},
在微信中打开此页面,苹果手机没问题可以正常加载,安卓手机微信中未获取到定位信息,而使用浏览器打开则没有问题。
经过排查,发现是由于部署的页面使用的是http协议引起的,部署ssl证书,使用https协议访问页面则没有问题。