使用map组件自定义气泡,在iOS上,点击第一个marker会显示相应的气泡,点击第二个marker时第一个气泡会隐藏显示第二个气泡,而在安卓上点击几个marker就显示几个气泡。
<map id="parkMap" style="width:100%; height:{{mapHeight}};" latitude="{{latitude}}" longitude="{{longitude}}" markers="{{markers}}" enable-satellite="true" enable-3D = "true" skew='15' bindmarkertap = "clickMarkert" show-location >
<cover-view slot="callout">
<block wx:for="{{customCalloutMarkerIds}}" wx:key="*this">
<cover-view marker-id="{{item}}" >
<cover-view class="map-callout">
<cover-image width="300" height="150" src="{{MarkersItem.ImgPath}}" />
<cover-view class="map-callout-view">
{{index}}-{{item}}
</cover-view>
</cover-view>
</cover-view>
</block>
</cover-view>
</map>
我这边解决了。方案:根据点击时@markertap回调传递过来的id,进行遍历当前markers数组。当前显示的marker修改他的显示模式为ALWAYS,其他则为BYCLICK。
示例代码:
updateMarker(markerId) {
for (let i = 0; i < this.markers.length; i++) {
if (this.markers[i].id != markerId) {
this.markers[i].callout.display = 'BYCLICK'
} else {
this.markers[i].callout.display = 'ALWAYS'
}
}
}