小程序（三）

Jul 20, 2018 | 前端之巅 | Hits

小程序map

小程序通过 map 组件实现地图相关功能，本文将结合常见的地图使用场景介绍 map 组件的常用属性和相关地图组件控制。

map 组件

map 组件算是小程序最复杂的组件之一，组件相关属性可查阅官方文档，下面我们将结合具体使用场景来介绍 map 组件的相关属性。

根据业务需求，做营销活动的时候要求跟换小程序内部皮肤

方法一：

每次做活动提交把所需图片提供，controls先展示默认图片，后端接口返回要是有活动开始替换发版的本地图片，发现非常麻烦每次要发版

方法二：

后端放回url地址通过小程序downloadFile 下载然后保存根据接口来控制是否展示营销活动

function downloadFile(url, callback) {
  wx.downloadFile({
    url,
    success: function(res) {
      callback && callback(res)
    }
  })
}

for (let type in bikeIcons) {
  ((type) => {
    downloadFile(bikeIcons[type], (res) => {
      // 图片下载失败设置项目目录下的默认图片
      bikeIcons[type] = res.statusCode === 200 ? item.filePath : defaultBikeIcons[type]
    })
    if (++downloadTime >= bikeTypes.length) {
      // 保存到全局变量
      getApp().globalData.bikeIcons = bikeIcons
    }
  })(type)
}

替换 markers 图标路径

const markers = [{
  latitude: '**'
  longitude: '**'
  width: '**'
  height: '**'
  id: '**',
  iconPath: bikeIcons[biketype]
}, {
  ...
}]
this.setData({markers})

前端