实现一直只显示一个自定义callout
实现一直只显示一个自定义callout,当点击另一个商店图标时,当前的自定义callout消失,对应的展示。
// marker数据结构
{
id: e.emallIndex, // 唯一的id
latitude: e.addressInfo.loc[1], // 纬度
longitude: e.addressInfo.loc[0], // 经度
iconPath: 'https://qn-qghotel.lindingtechnology.com/pcenter_1631247579226.png',
width: 20,
height: 24,
customCallout: {
display: 'ALWAYS'
}
}
// map
<Map
id='myMap'
className='map'
markers={markers}
longitude={cityEmalls[0].addressInfo.loc[0]}
latitude={cityEmalls[0].addressInfo.loc[1]}
scale={18}
onMarkertap={this.onMarkertap.bind(this)}
onCalloutTap={this.onCalloutTap.bind(this)}
>
<CoverView slot='callout'>
<CoverView marker-id={cityEmalls[active].emallIndex} className='callout'>
<CoverView className='callout-main'>
<CoverView className='name'>{cityEmalls[active].name}</CoverView> <CoverView className='distance'>距你{((cityEmalls[active].distance) / 1000).toFixed(1) + 'km'}</CoverView>
</CoverView>
<CoverImage className='triangle' src='https://qn-qghotel.lindingtechnology.com/pcenter_1631517871064.png' />
</CoverView>
</CoverView>
</Map>
出现开发者工具callout内容有更新,真机不更新
解决:确保marker的id与coverView的marker-id对应且在更新后是不一样的