收藏
回答

Map组件marker自定义气泡会被其他marker遮挡?社区已有多个类似提问,恳请官方回应。

问题:小程序,调用Map组件,marker 上的自定义气泡( customCallout )会被其他marker遮挡。

尝试在.customCallout设置z-index,也尝试过将marker的zIndex设置为-1了,还是无法解决,求解决办法,谢谢。

WXML:
<map id="myMap" latitude="{{currentLatitude}}" longitude="{{currentLongitude}}" show-location="true"
  circles="{{circles}}" enable-satellite="{{satellite}}" show-compass="true" enable-overlooking="true"
  markers="{{scale>=17?markers:false}}" bindregionchange="bindRegionChanged" bindmarkertap="bindMarkerTap">

  <cover-view slot="callout">
    <block wx:for="{{markers}}" wx:key="index">
      <cover-view class="customCallout" marker-id="{{index}}">
        <cover-view class="content">
          这个是自定义气泡{{item.obdName}}
        </cover-view>
      </cover-view>
    </block>
  </cover-view>
</map>

WXSS:
.customCallout {
  width: 350rpx;
  height: 200rpx;
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 -1rpx 6rpx rgba(0, 0, 0, 0.1);
  border-radius: 10rpx;
}
回答关注问题邀请回答
收藏

1 个回答

  • Cjiang
    Cjiang
    2021-03-23

    你好,麻烦提供出现问题的具体机型、微信版本号、系统版本号,以及能复现问题的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html),并详细描述下复现的流程。

    2021-03-23
    有用
    回复 3
    • 勇敢的心
      勇敢的心
      2022-07-18
      我也遇到同样的问题,和机型、微信版本号无关
      2022-07-18
      回复
    • 勇敢的心
      勇敢的心
      2022-07-18
      marker={
             id: -this.currPuoy.id*1000+i,
             latitude: o[1],
             longitude: o[0],
             width: size,
             height: size,
             iconPath: path,
             anchor:{x: 0.5, y: 0.5} ,
             customCallout:{
               anchorY:10,
               anchorX:10,
              display:'NONE'
             }
            }
      2022-07-18
      回复
    • 勇敢的心
      勇敢的心
      2022-07-18
      <cover-view slot="callout" >
          <cover-view v-for="(item,index) in customCallIds" :key="index" >
           <cover-view class="callout" :marker-id="item" >
            <cover-view class="time">{{hisList[index].cur_time}}<!-- <w-icon name="icon-guanbi" color="#ffffff" size="12" @click="closeCover" style="position: absolute;right: 4px;top:-8px"></w-icon> --></cover-view>
            <cover-view class="coverRow">
             <cover-view class="coverTextLeft">流速:{{toF(hisList[index].ave_sp,1)}}cm/s</cover-view>
             <cover-view class="coverTextRight">流向:{{toF(hisList[index].ave_drct,1)}}°</cover-view>
            </cover-view>
            <cover-view class="coverRow">
             <cover-view class="coverTextLeft">波高:{{toF(hisList[index].max_wav_ht,2)}}m</cover-view>
             <cover-view class="coverTextRight">波向:{{toF(hisList[index].main_wav_drct,1)}}°</cover-view>
            </cover-view>
           </cover-view>
          </cover-view>
         </cover-view>
      2022-07-18
      回复
登录 后发表内容
问题标签