uni-app vue使用地图map时 marker上的气泡 callout在安卓上显示两个窗体 ios正常显示

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

uni-app vue使用地图map时 marker上的气泡 callout在安卓上显示两个窗体 ios正常显示

项目信息 详情
产品分类 uniapp/小程序/微信
PC开发环境操作系统 Mac
PC开发环境操作系统版本号 15.0 (24A335)
HBuilderX类型 正式
HBuilderX版本号 4.08
第三方开发者工具版本号 1.06.2409131
基础库版本号 3.6.5
项目创建方式 HBuilderX

示例代码：

let distanceData = {
id: Number(item.id),
width: 30,
height: 35,
latitude: item.latitude,
longitude: item.longitude,
iconPath:
“https://txr001.zthj.net/electric-vehicles/Group 10.png”,
// 添加窗体信息
callout: {
content: ‘可借：’ + item.lease_stock + ’ 可买：’ + item.good_stock, // 假设item对象中有name属性表示站点名称
color: ‘#ffffff’,
fontSize: 14,
borderRadius: 5,
bgColor: ‘#62cc85’,
padding: 5,
display: ‘ALWAYS’ // 始终显示窗体信息
}
};


## 操作步骤：
正常创建地图，添加标记点，添加callout窗体信息。

## 预期结果：
正常创建地图，添加标记点，添加callout窗体信息。窗体信息显示正常，位于标记点上方

## 实际结果：
开发者工具显示正常，安卓机在体验版、正式版、真机调试下会显示两个窗体信息，ios显示正常

## bug描述：
代码中向标记点添加callout窗体信息，安卓机会显示两个窗体  

![](https://www.itying.com/uniimg.php?url=https://img-cdn-tc.dcloud.net.cn/uploads/questions/20241114/184619dcd2514482f9a9ff250f527413.jpg)
![](https://www.itying.com/uniimg.php?url=https://img-cdn-tc.dcloud.net.cn/uploads/questions/20241114/30c66cebc398bc9b13657cd433f2c7d2.jpg)

Harmonyos Next教程
3 回复

来个官方大大看看吧。


来个官方看看吧

在 uni-app 中使用 Vue 开发时，遇到地图组件 map 上的标记 marker 的气泡 callout 在安卓上显示两个窗体的问题，而 iOS 上显示正常，这通常是由于某些兼容性问题或者特定的 bug 导致的。虽然我们不能直接提供具体的修复建议（因为这类问题通常需要查看具体的框架版本和代码实现），但我们可以给出一个简化的代码示例，并展示如何配置 map 组件以及 marker 和 callout。这可以帮助你对照自己的代码，检查是否有配置上的差异或者潜在的问题。

下面是一个基本的 uni-app 项目中使用 map 组件的代码示例：

<template>
  <view>
    <map
      id="map"
      :longitude="longitude"
      :latitude="latitude"
      scale="14"
      show-location
      style="width: 100%; height: 300px;"
    >
      <cover-view v-for="(marker, index) in markers" :key="index">
        <map-marker
          :id="'marker-' + index"
          :longitude="marker.longitude"
          :latitude="marker.latitude"
          :callout="{
            content: marker.name,
            bgColor: '#fff',
            padding: 5,
            borderRadius: 5,
            display: 'ALWAYS'
          }"
        />
      </cover-view>
    </map>
  </view>
</template>

<script>
export default {
  data() {
    return {
      longitude: 116.404,
      latitude: 39.915,
      markers: [
        {
          id: 1,
          name: 'Marker 1',
          longitude: 116.405,
          latitude: 39.916
        },
        {
          id: 2,
          name: 'Marker 2',
          longitude: 116.403,
          latitude: 39.914
        }
      ]
    };
  }
};
</script>

<style scoped>
/* 样式可以根据需求调整 */
</style>

在这个示例中，我们定义了一个地图组件，并在地图上添加了两个标记。每个标记都有一个 callout，显示标记的名称。注意，callout 的配置是直接在 map-marker 组件中通过属性传递的。

如果你的项目中 callout 在安卓上出现了两个窗体，而代码结构与上述示例类似，建议检查以下几点：

  1. 确保 uni-app 和相关依赖库是最新的，因为框架的更新可能修复了这类问题。
  2. 检查是否有其他 CSS 样式或 JavaScript 代码干扰了 callout 的显示。
  3. 尝试在不同的安卓设备和版本上测试，以确定是否是特定设备或版本的问题。
  4. 查看 uni-app 的官方文档和社区，看看是否有其他开发者遇到并解决了类似的问题。
回到顶部