微信小程序踩坑记 - 地图组件吐槽

前不久参加了学校的一个微信小程序比赛,决定做一个基于地图的位置分享小应用。正好有现成的地图组件,直接拿来用咯,官方示例如下所示。

<map  
  longitude="113.324520" 
  latitude="23.099994" 
  markers="{{markers}}" 
  covers="{{covers}}" 
  style="width: 375px; height: 200px;"
></map>

除了地图本身的 longitude latitude 和缩放级别 scale 之外,官方只给了 markerscovers 两个附加功能,前者是指定位置的文本标记,后者是指定位置的覆盖图片。两个参数为对象数组,内容来自官方文档。

Page({  
  data: {
    markers: [{
      latitude: 23.099994,
      longitude: 113.324520,
      name: 'T.I.T 创意园',
      desc: '我现在的位置'
    }],
    covers: [{
      latitude: 23.099794,
      longitude: 113.324520,
      iconPath: '../images/car.png',
      rotate: 10
    },
    {
      latitude: 23.099298,
      longitude: 113.324129,
      iconPath: '../images/car.png',
      rotate: 90
    }]
  }
})

地图 Covers 图片大小与路径

第一处坑爹之处在于,这两个东西都无法指定样式,更无法绑定点击事件,这就导致 covers 的图片不能指定大小,只能以原图的大小显示出来,markers 的文本框不能指定样式,很丑。更甚,covers 的图片不能用网络图片,只能用本地工程内的图片。所以原本构想的在地图对应位置显示用户头像的需求只能换为别的解决方案了。

地图初始数据不能为空

对应的需求是,地图所需的数据先为空,在页面 onload 的时候再获取到,结果,初始值为空,地图无法渲染,这导致后面 onload 的时候,地图虽然数据获取到了,也更新了 data,视图却依然不变,地图无法渲染。代码如下所示。

<map  
  class="mainMap" 
  latitude="{{mapData[0]}}" 
  longitude="{{mapData[1]}}" 
  markers={{markers}} 
  covers={{covers}}
></map>

数据部分如下,初始值都为空,亦即 undefined

Page({  
  data: {
    mapData: [],
    covers: [],
    markers: [],
  },
  onLoad: function () {
    var that = this
    wx.getLocation({
      type: 'wgs84',
      success: function (res) {
        that.setData({
          mapData: [res.latitude, res.longitude],
          covers: [{
            iconPath: "../images/N0.png",
            latitude: res.latitude,
            longitude: res.longitude,
            rotate: 0
          }],
          markers: [{
            desc: "吃屎吧你",
            latitude: res.latitude,
            longitude: res.longitude,
            name: "Toxni.com"
          }],
        })
      },
      fail: function () {
        wx.showModal({
          title: '定时刷新失败',
          content: '请确定您的微信有获取定位权限',
          showCancel: false,
        })
      }
    })
}

地图组件真机与模拟器表现不一致

表现不一致的地方主要有以下几点。在 marker 的文本框内,模拟器内有 去这里 字样而真机 (iPhone6) 没有。如果有多个 marker,模拟器内会显示一个横向的切换菜单,左滑是地图显示,右滑是列表显示 marker,这个性状真机没有。另外,真机也没有左下角的指北针。

上图右为模拟器,左为真机 (iPhone6) 样式。