支付宝小程序Map组件的onMarkerTap中，缺少markerId和经纬度

[directguo]

问题描述

支付宝小程序Map组件的onMarkerTap事件中，缺少markerId和经纬度

复现步骤

1. 监听onMarkerTap
2. 观察打印值，其中没有latitude，longitude，markerId。原生支付宝小程序开发中有此值。微信小程序仅有markId，没有经纬度。

import Taro, { Component } from '@tarojs/taro'
import { View, Button, Map } from '@tarojs/components'
import { BasePage } from '@/taro-yum-component'
import MapView from '@/bs-taro-map'

import './index.less'

const assets = {
  centers: [
    {
      latitude: 30.49625819,
      longitude: 114.32362318
    },
    {
      latitude: 30.49611028,
      longitude: 114.32950258
    },
    {
      latitude: 30.49331835,
      longitude: 114.32611227
    }
  ],
  markers: [
    {
      iconPath: '/packages/bs-taro-map/demo/marker.png',
      id: 0,
      latitude: 30.49625819,
      longitude: 114.32362318,
      width: 50,
      height: 50
    },
    {
      iconPath: '/packages/bs-taro-map/demo/marker.png',
      id: 1,
      latitude: 30.49611028,
      longitude: 114.32950258,
      width: 50,
      height: 50
    },
    {
      iconPath: '/packages/bs-taro-map/demo/marker.png',
      id: 2,
      latitude: 30.49331835,
      longitude: 114.32611227,
      width: 50,
      height: 50
    }
  ],
  polyline: [
    {
      points: [
        {
          latitude: 30.49625819,
          longitude: 114.32362318
        },
        {
          latitude: 30.49611028,
          longitude: 114.32950258
        }
      ],
      color: '#FF0000DD',
      width: 2,
      dottedLine: true
    },
    {
      points: [
        {
          latitude: 30.49611028,
          longitude: 114.32950258
        },
        {
          latitude: 30.49331835,
          longitude: 114.32611227
        }
      ],
      color: '#0000FFDD',
      width: 2,
      dottedLine: false
    },
    {
      points: [
        {
          latitude: 30.49331835,
          longitude: 114.32611227
        },
        {
          latitude: 30.49625819,
          longitude: 114.32362318
        }
      ],
      color: '#FF00FFDD',
      width: 2,
      dottedLine: false
    }
  ],
  circles: [
    {
      latitude: 30.49625819,
      longitude: 114.32362318,
      radius: 60,
      fillColor: '#7cb5ec88',
      color: '#ffffff'
    },
    {
      latitude: 30.49611028,
      longitude: 114.32950258,
      radius: 40,
      fillColor: '#7cb5ec88',
      color: '#ff0000'
    },
    {
      latitude: 30.49331835,
      longitude: 114.32611227,
      radius: 50,
      fillColor: '#7cb5ec88',
      color: '#ff00ff'
    }
  ]
}

export default class Start extends Component {
  config = {
    navigationBarTitleText: '地图示例'
  }

  constructor(props) {
    super(props)
    this.state = {
      scale: 15,
      markers: assets.markers
    }
    this.idx = 0

    this._addMarker = this._addMarker.bind(this)
    this._scaleUp = this._scaleUp.bind(this)
    this._scaleDown = this._scaleDown.bind(this)
  }

  componentWillMount() {}

  componentDidMount() {}

  componentDidShow() {}

  _addMarker() {
    const { markers = [], polyline = [], circles = [] } = this.state

    if (markers.length < assets.markers.length) {
      markers[this.idx] = assets.markers[this.idx]
    }
    if (polyline.length < assets.polyline.length) {
      polyline[this.idx] = assets.polyline[this.idx]
    }
    if (circles.length < assets.circles.length) {
      circles[this.idx] = assets.circles[this.idx]
    }
    const center = this.idx < assets.centers.length ? assets.centers[this.idx] : assets.centers[assets.centers.length - 1]
    const { longitude, latitude } = center
    this.setState({
      markers,
      polyline,
      circles,
      longitude,
      latitude
    })
    console.log(longitude, latitude)
    this.idx += 1
  }

  _scaleUp() {
    const { scale } = this.state
    this.setState({
      scale: scale + 1
    })
  }

  _scaleDown() {
    const { scale } = this.state
    this.setState({
      scale: scale - 1
    })
  }

  onClick(e) {
    console.log(e)
  }

  onMarkerTap(e, a) {
    console.log(e, a)
  }

  onRegionChange(e) {
    console.log(e)
  }

  render() {
    const { scale, markers, polyline, circles, longitude, latitude } = this.state
    return (
      <BasePage
        disableScroll
        showCustomFooter // 显示自定义footer
        renderFooter={
          <View className='button-group'>
            <Button className='button' type='primary' onClick={this._addMarker}>
              添加Marker
            </Button>
            <Button className='button' type='primary' onClick={this._scaleUp}>
              +
            </Button>
            <Button className='button' type='primary' onClick={this._scaleDown}>
              -
            </Button>
          </View>
        }
      >
        <View className='mapview-wrap'>
          <Map
            scale={scale}
            longitude={longitude}
            latitude={latitude}
            markers={markers}
            onClick={this.onClick}
            onMarkerTap={this.onMarkerTap}
            onRegionChange={this.onRegionChange}
            polyline={polyline}
            circles={circles}
          />
        </View>
      </BasePage>
    )
  }
}

期望行为

正常返回被点击marker的latitude，longitude，markerId

报错信息

系统信息

补充信息

如果您有功能上的建议，可以提到 FeatHub

使用上的问题，欢迎在「Taro 社区」一起交流

[taro-bot[bot]]

CC @Chen-jj

[taro-bot[bot]]

欢迎提交 Issue~

如果你提交的是 bug 报告，请务必遵循 Issue 模板的规范，尽量用简洁的语言描述你的问题，最好能提供一个稳定简单的复现。🙏🙏🙏

如果你的信息提供过于模糊或不足，或者已经其他 issue 已经存在相关内容，你的 issue 有可能会被关闭。

Good luck and happy coding~

[Lemonreds]

似乎也遇到了这个问题，试试不要传 id = 0 ，id=0支付宝原生也取不到markid, @directguo

[yuluotuxi]

微信小程序中，id如果不是数字监听marker点击事件就不返回值，之前遇到过，改成数字就可了