问题描述

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

<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

来源：掘金

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