小程序实例回顾分析--地图组件(下)

polyline:线路规划

线路规划,目前小程序是没有内置方法的。所以,解决思路是,将其实位置坐标拿出来,去调一下第三方的接口(我们这里调用的是高德地图的),将返回的坐标点连线,实现线路规划功能。

这里,因为需要展示出骑行时间以及步行时间,所以进行了一个简单的计算。

_this.mapCtx.includePoints,适配地图大小。

  let points = []
  let data = res.data.route
  _this.data.distance = 0
  if(data.paths && data.paths[0] && data.paths[0].steps){
      let steps = data.paths[0].steps;
      for(let i = 0; i < steps.length; i++){ let poLen = steps[i].polyline.split(';'); _this.data.distance += parseInt(steps[i].distance) || 0 for(let j = 0;j < poLen.length; j++){ points.push({ longitude: parseFloat(poLen[j].split(',')[0]), latitude: parseFloat(poLen[j].split(',')[1]) }) } } } _this.data.distanceKm = parseInt(_this.data.distance / 1000) _this.data.mins = parseInt((_this.data.distance / 1.2) / 60) _this.setData({ distance: _this.data.distance, distanceKm: _this.data.distanceKm, availableCount: target.availableCount, mins: _this.data.mins, bikeSiteAdd: target.bikeSiteAdd }); if (type !== 'marker'){ _this.setData({ polyline: [{ points: points, color: "#4670DE", width: 5, dottedLine: false }] }); _this.mapCtx.includePoints({ padding: [40], points: [{ latitude:_this.data.geoLatitude, longitude:_this.data.geoLongitude, }, { latitude:target.latitude, longitude:target.longitude, }] }) } _this.data.timer2 = setTimeout(() => {
      clearTimeout(_this.data.timer2)
      _this.data.timer2 = null
  }, 200)
  wx.hideLoading()

marker的配置

marker可以配置坐标,图标,宽高等。看似很全了,但其实还是有很多问题。首先marker的宽高是px单位,并不存在小程序在页面中提供的rpx的概念。

callout是marker上部放一个冒泡框。这个框的点击可以触发marker的点击。但是如果想让他达到更多的功能,还是有很多限制。它的宽高是不能定义的。它的显示隐藏也没办法自己定义。 虽然接口中说明可以配置一下它默认状态下的属性。

我们的需求是,第几一个marker时,它的callout显示,点击另一个时,当前marker的callout显示,其他marker的callout隐藏。这是很普通的需求了,在开发工具中也没问题。 但是在真机中,点击第二个marker,第一个marker的callout并不会隐藏。除非我把地图中所有的marker全更新一遍。但是又会略卡。这个性能开销有点大,所以只能忍了。

let marker = {
    id: item.homeid,
    longitude: item.lng,
    latitude: item.lat,
    iconPath: iconpath,
    width: 29.5,
    height: 32.5,
    availableCount: item.bikenum,
    name: item.name,
    callout: {
        content: '去这里',
        color: '#ffffff',
        fontSize: 14,
        bgColor: '#E73D3D',
        padding: 6,
        textAlign: 'center',
        borderRadius: 20
    }
}

动画处理

在cover-view中,需要有一个动画效果。但是按照文档直接用animation的时候,同时用两个animation的时候,在模拟器中是没有问题的,但是在真机上会有bug。

cover-view的处理,还真是到处都有坑。这时候,只能想一下别的办法。

这里,因为cover-view支持transition,并且支持transform (translateX, translateY),我们用css来处理这个动画

  style="transform: translateX({{ huanche.transXBike + 'px' }});"

  this.setData({
      'huanche.transXBike': setWidth,
  })

随机浏览