uni-app map组件customCallout动态样式问题

发布于 1周前 作者 eggper 来自 Uni-App

uni-app map组件customCallout动态样式问题

开发环境 版本号 项目创建方式
Windows win11 23H2 HBuilderX 
## 示例代码：

```html
<map id="map" :longitude="params.longitude" :latitude="params.latitude" :markers="markers" [@callouttap](/user/callouttap)="callouttap" show-location>  
  <cover-view slot="callout">  
    <cover-view v-for="item in markers" :key="item.id">  
      <cover-view :marker-id="item.id" class="callout-item">  
        <cover-view class="item-container" :style="{ 'border-color': activeMarkId === item.id ? '#fe564d' : 'transparent' }"></cover-view>  
      </cover-view>  
    </cover-view>  
  </cover-view>  
</map>

callouttap(e) {  
  this.activeMarkId = e.detail.markerId  
}

操作步骤：

  1. 缩小地图至显示聚合点
  2. 放大地图至显示callout气泡
  3. 此时点击callout气泡, 动态样式失效, 重复1 2步骤生效

预期结果：

  • 动态样式即时生效

实际结果：

  • 动态样式失效

bug描述：

map组件中使用customCallout，通过callouttap事件动态切换callout气泡边框样式，在手机上地图缩小显示聚合点后，再次放大后本次点击事件可以正常触发，但设置的样式不会及时生效，会延迟到下次缩小放大重新显示callout气泡才生效


Harmonyos Next教程
4 回复

使用微信小程序原生开发，验证一下是否有问题。


好像原生小程序也有这问题

回复 1***@qq.com: 那就去微信社区反馈吧，uni也没办法。

在处理uni-app中的map组件时，customCallout（自定义标注）的动态样式调整可以通过绑定数据属性和使用样式绑定来实现。以下是一个简单的示例，展示了如何根据某些条件动态改变customCallout的样式。

首先，确保你的页面或组件中已经引入了map组件，并配置了基本的customCallout。

示例代码

1. 在页面的<template>部分：

<template>
  <view>
    <map
      :latitude="latitude"
      :longitude="longitude"
      :markers="markers"
      :show-location="true"
      @tap="onMapTap"
      style="width: 100%; height: 300px;"
    >
      <cover-view v-for="(marker, index) in markers" :key="index" :latitude="marker.latitude" :longitude="marker.longitude">
        <cover-view
          class="custom-callout"
          :style="getCalloutStyle(marker.id)"
        >
          {{ marker.name }}
        </cover-view>
      </cover-view>
    </map>
  </view>
</template>

2. 在页面的<script>部分：

<script>
export default {
  data() {
    return {
      latitude: 39.9042,
      longitude: 116.4074,
      markers: [
        { id: 1, latitude: 39.905, longitude: 116.404, name: 'Marker 1' },
        { id: 2, latitude: 39.906, longitude: 116.405, name: 'Marker 2' },
      ],
    };
  },
  methods: {
    getCalloutStyle(id) {
      let style = {
        backgroundColor: 'rgba(255, 255, 255, 0.8)',
        padding: '5px',
        borderRadius: '5px',
        color: '#000',
      };
      
      // 根据条件动态改变样式，例如根据id
      if (id === 1) {
        style.backgroundColor = 'rgba(255, 0, 0, 0.8)';
        style.color = '#fff';
      }
      
      return style;
    },
    onMapTap(e) {
      // 处理地图点击事件
      console.log(e);
    },
  },
};
</script>

3. 在页面的<style>部分：

<style scoped>
.custom-callout {
  position: absolute;
  white-space: nowrap;
  transform: translate(-50%, -100%); /* 根据需要调整位置 */
}
</style>

说明

  • map组件中，我们使用了cover-view来覆盖在地图上，以实现自定义标注。
  • getCalloutStyle方法根据marker的id动态返回不同的样式。
  • 使用:style绑定动态样式，确保customCallout的样式可以根据需要动态变化。
  • transform属性用于调整标注的位置，你可能需要根据实际需求调整这个值。

通过这种方式，你可以根据具体业务逻辑动态调整customCallout的样式，实现更灵活和丰富的地图标注效果。

回到顶部