评论

微信地图组件定位到非洲问题 真机上地图中心位置点加载错误 真机地图渲染蓝色 海洋

解决 微信地图组件定位到非洲问题 真机上地图中心位置点加载错误 真机地图渲染蓝色 海洋

问题描述

微信小程序地图组件电脑端显示正常,在手机上加载时出现定位到非洲的问题,地图中心点显示不正确问题、解决思路及解决方法。

<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

来源:掘金

著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

最后一次编辑于  2021-06-03  
点赞 0
收藏
评论
登录 后发表内容