问题描述
微信小程序地图组件电脑端显示正常,在手机上加载时出现定位到非洲的问题,地图中心点显示不正确问题、解决思路及解决方法。
<map latitude="{{latitude}}" longitude="{{longitude}}"></map>
找出问题出现的原因
- 打开手机调试模式,查看手机上wxml中map属性是否正常加载;
- 使用真机预览模式,查看map组件属性是否正常加载;
- 在onload中使用console.log打印latitude/longitude数据是否正常;
- 在onload中使用wx.createMapContext(string mapId, Object this)创建mapContext,使用mapContext.getCenterLocation获取地图中心点经纬度。
以上几种都是在寻找问题出现原因时使用的方法,发现通过wxml观察map组件中经纬度均有值且不为0,如下:
<map latitude="30.56" longitude="114.23"></map>
但是地图显示仍出现定位到非洲,即地图渲染时经纬度仍为0;
最终使用mapContext.getCenterLocation发现在手机上获取地图中心点经纬度始终为0;
此时已经非常确定问题出现的原因了,定位到非洲的原因就是在于地图组件渲染时候,latitude/longitude的值为0
解决办法
方法一:使用setData在地图渲染时设置latitude、longitude;
方法二:待wx.request数据请求完成且setData完成后再渲染地图;
方法三:在data中给latitude/longitude设置初始静态的数值;
方法的原理都是保证地图组件的latitude/longitude的值不为0。
方法一:使用setData在地图渲染时设置latitude、longitude;
1.在onload中使用wx.createMapContext获取 Mapcontext 对象
2.使用Mapcontext.getCenterLocation方法获取目前地图中心经纬度坐标;在手机调试中发现,地图定位在非洲的原因在于地图的latitude和longitude值为0。
3.判断如果返回值res对象中latitude==0,或者longitude==0,就重新setData经纬度。
经尝试此方法可以解决地图定位在非洲的问题,但是有点不完美的地方,就是手机上有时会先出现定位在非洲,1秒左右setData成功后地图重新显示为指定的中心点。
onLoad: function (options) {
this.mapCtx = wx.createMapContext('guidingMap');
this.mapCtx.getCenterLocation({
success: function (res) {
if (res.latitude == 0 || res.longitude == 0) {
util.get(`${this.data.baseURL}${url}`)
.then(mapMetaData => {
this.setData({
latitude: mapMetaData.map.latitude,
longitude: mapMetaData.map.longitude,
});
})
.then(() => {
console.log(this.data.longitude + ' ' + this.data.latitude);
});
}
},
});
}
方法二:待wx.request数据请求完成且setData完成后再渲染地图;
在wxml中对map组件添加wx:if="{{ifshow}}",默认ifshow设置为false,在数据请求完合适的位置,setData({ifshow:true})。此方法可以完美解决,缺点是数据量大、url请求过多时地图加载缓慢,建议可以加个loading效果。
<map latitude="{{latitude}}" longitude="{{longitude}}" wx:if="{{ifshow}}"></map>
page({
data:{
ifshow:false
}
onload:function(){
util.get(`${this.data.baseURL}${url}`).then(mapMetaData=>{
this.setData({
latitude: mapMetaData.map.latitude,
longitude: mapMetaData.map.longitude,
ifshow:true
});
})
}
})
方法三:在data中给latitude/longitude设置初始静态的数值;
page({
data:{
latitude: 30.5065941330001,
longitude: 114.238919343,
}
})
作者:路漫漫
链接:https://juejin.cn/post/6968730477217710087
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。