uni-app中map组件的marker的callout content无法解析html，customCallout设置后不显示

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

uni-app中map组件的marker的callout content无法解析html，customCallout设置后不显示

产品分类：

uniapp/小程序/微信

PC开发环境操作系统：

Windows

PC开发环境操作系统版本号：

windows 11 家庭中文版 22H2

HBuilderX类型：

正式

HBuilderX版本号：

3.8.12

第三方开发者工具版本号：

1.06.2310080

基础库版本号：

1.06.2310071

项目创建方式：

HBuilderX

示例代码：

<template>
<view class="content">
<map style="width: 100%; height: 100%" :latitude="latitude" :longitude="longitude" :markers="covers" @markertap="onMarkerClick">
<cover-view slot="callout">
<block v-for="(item, index) in covers" :key="index">
<cover-view class="customCallout" :marker-id="item">
<cover-view class="content">
<cover-view style="margin: 5px; padding: 3px 5px">定位时间：2023.01.01 09:43</cover-view>
<cover-view style="margin: 5px; padding: 3px 5px">停留时间：2023.01.01 09:43</cover-view>
<cover-view style="margin: 5px; padding: 3px 5px">定位时速：1.27km/h</cover-view>
</cover-view>
</cover-view>
</block>
</cover-view>
</map>
</view>
</template>  
<script setup>
import { onMounted } from 'vue'
import iconUrl from '@/static/image/30.png'  

const latitude = 23.13065
const longitude = 113.3274
const covers = [
{
id: 0,
latitude: 23.13065, //纬度
longitude: 113.3274, //经度
iconPath: iconUrl, //显示的图标
rotate: 0, // 旋转度数
width: 40,
height: 68,
title: '设备1', //标注点名
joinCluster: true,
customCallout: {
anchorY: 0,
anchorX: 0,
display: 'BYCLICK'
}
},
{
id: 1234597,
latitude: 23.106574, //纬度
longitude: 113.324587, //经度
iconPath: iconUrl, //显示的图标
rotate: 0, // 旋转度数
width: 40,
height: 68,
title: '设备2', //标注点名
joinCluster: true,
customCallout: {
anchorY: 0,
anchorX: 0,
display: 'BYCLICK'
}
},
{
id: 2,
latitude: 23.1338, //纬度
longitude: 113.33052, //经度
iconPath: iconUrl, //显示的图标
rotate: 0, // 旋转度数
width: 40,
height: 68,
title: '设备3', //标注点名
joinCluster: false,
customCallout: {
anchorY: 0,
anchorX: 0,
display: 'BYCLICK'
}
},
{
id: 3,
latitude: 23.136455, //纬度
longitude: 113.329002, //经度
iconPath: iconUrl, //显示的图标
title: '设备4', //标注点名
rotate: 0, // 旋转度数
width: 40,
height: 68,
customCallout: {
anchorY: 0,
anchorX: 0,
display: 'BYCLICK'
}
},
{
id: 4,
latitude: 23.224781, //纬度
longitude: 113.293911, //经度
iconPath: iconUrl, //显示的图标
rotate: 0, // 旋转度数
title: '设备5', //标注点名
width: 40,
height: 68,
customCallout: {
anchorY: 0,
anchorX: 0,
display: 'BYCLICK'
}
},
{
id: 5,
latitude: 23.072726, //纬度
longitude: 113.277921, //经度
iconPath: iconUrl, //显示的图标
rotate: 0, // 旋转度数
title: '设备6', //标注点名
width: 40,
height: 68,
customCallout: {
anchorY: 0,
anchorX: 0,
display: 'BYCLICK'
}
}
]

const onMarkerClick = (markerId) => {
console.log(markerId, 'mmm')
// 获取被点击的标记点
const marker = covers.find((marker) => marker.id === markerId.markerId)
console.log(marker, 'marker')
// 显示自定义气泡
marker.customCallout.display = 'ALWAYS'
}
</script>  
.content {
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.customCallout {
color: #000;
background-color: orange;
border: 1px solid #ccc;
}

操作步骤：

<template>
<view class="content">
<map style="width: 100%; height: 100%" :latitude="latitude" :longitude="longitude" :markers="covers" @markertap="onMarkerClick">
<cover-view slot="callout">
<block v-for="(item, index) in covers" :key="index">
<cover-view class="customCallout" :marker-id="item">
<cover-view class="content">
<cover-view style="margin: 5px; padding: 3px 5px">定位时间：2023.01.01 09:43</cover-view>
<cover-view style="margin: 5px; padding: 3px 5px">停留时间：2023.01.01 09:43</cover-view>
<cover-view style="margin: 5px; padding: 3px 5px">定位时速：1.27km/h</cover-view>
</cover-view>
</cover-view>
</block>
</cover-view>
</map>
</view>
</template>  
<script setup>
import { onMounted } from 'vue'
import iconUrl from '@/static/image/30.png'  

const latitude = 23.13065
const longitude = 113.3274
const covers = [
{
id: 0,
latitude: 23.13065, //纬度
longitude: 113.3274, //经度
iconPath: iconUrl, //显示的图标
rotate: 0, // 旋转度数
width: 40,
height: 68,
title: '设备1', //标注点名
joinCluster: true,
customCallout: {
anchorY: 0,
anchorX: 0,
display: 'BYCLICK'
}
},
{
id: 1234597,
latitude: 23.106574, //纬度
longitude: 113.324587, //经度
iconPath: iconUrl, //显示的图标
rotate: 0, // 旋转度数
width: 40,
height: 68,
title: '设备2', //标注点名
joinCluster: true,
customCallout: {
anchorY: 0,
anchorX: 0,
display: 'BYCLICK'
}
},
{
id: 2,
latitude: 23.1338, //纬度
longitude: 113.33052, //经度
iconPath: iconUrl, //显示的图标
rotate: 0, // 旋转度数
width: 40,
height: 68,
title: '设备3', //标注点名
joinCluster: false,
customCallout: {
anchorY: 0,
anchorX: 0,
display: 'BYCLICK'
}
},
{
id: 3,
latitude: 23.136455, //纬度
longitude: 113.329002, //经度
iconPath: iconUrl, //显示的图标
title: '设备4', //标注点名
rotate: 0, // 旋转度数
width: 40,
height: 68,
customCallout: {
anchorY: 0,
anchorX: 0,
display: 'BYCLICK'
}
},
{
id: 4,
latitude: 23.224781, //纬度
longitude: 113.293911, //经度
iconPath: iconUrl, //显示的图标
rotate: 0, // 旋转度数
title: '设备5', //标注点名
width: 40,
height: 68,
customCallout: {
anchorY: 0,
anchorX: 0,
display: 'BYCLICK'
}
},
{
id: 5,
latitude: 23.072726, //纬度
longitude: 113.277921, //经度
iconPath: iconUrl, //显示的图标
rotate: 0, // 旋转度数
title: '设备6', //标注点名
width: 40,
height: 68,
customCallout: {
anchorY: 0,
anchorX: 0,
display: 'BYCLICK'
}
}
]

const onMarkerClick = (markerId) => {
console.log(markerId, 'mmm')
// 获取被点击的标记点
const marker = covers.find((marker) => marker.id === markerId.markerId)
console.log(marker, 'marker')
// 显示自定义气泡
marker.customCallout.display = 'ALWAYS'
}
</script>  
.content {
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.customCallout {
color: #000;
background-color: orange;
border: 1px solid #ccc;
}

预期结果：

显示callout

实际结果：

不显示，也无法解析html



### bug描述：
map组件的marker 的callout content 解析不了html，customCallout 怎么设置都不显示

1 回复

在 uni-app 中，map 组件的 marker 的 callout 内容确实无法直接解析 HTML。如果你希望在 callout 中显示更丰富的内容，可能需要使用 customCallout 来实现。然而，customCallout 在某些情况下可能无法正常显示，以下是一些可能的原因和解决方案：

1. customCallout 不显示的可能原因

  • 平台差异：customCallout 在不同平台上的支持程度可能不同，尤其是在某些小程序平台上可能存在兼容性问题。
  • 样式问题：customCallout 的样式可能没有正确设置，导致无法显示。
  • 层级问题：customCallout 可能被其他元素遮挡，导致无法显示。

2. 解决方案

2.1 使用 customCallout

你可以通过 customCallout 来实现自定义的气泡内容。以下是一个示例：

<template>
  <view>
    <map
      :latitude="latitude"
      :longitude="longitude"
      :markers="markers"
      style="width: 100%; height: 300px;"
    ></map>
  </view>
</template>

<script>
export default {
  data() {
    return {
      latitude: 39.909,
      longitude: 116.39742,
      markers: [
        {
          id: 1,
          latitude: 39.909,
          longitude: 116.39742,
          customCallout: {
            display: 'ALWAYS', // 控制显示方式
            anchorX: 0, // 锚点X
            anchorY: 0, // 锚点Y
            content: '<view style="background-color: #fff; padding: 10px; border-radius: 5px;"><text style="color: #000;">自定义气泡内容</text></view>'
          }
        }
      ]
    };
  }
};
</script>

2.2 使用 cover-view 和 cover-image

如果你需要更复杂的布局和样式，可以考虑使用 cover-view 和 cover-image 来覆盖在地图上。cover-view 和 cover-image 是专门用于地图上的覆盖组件，可以解决 customCallout 无法解析 HTML 的问题。

<template>
  <view>
    <map
      :latitude="latitude"
      :longitude="longitude"
      :markers="markers"
      style="width: 100%; height: 300px;"
    >
      <cover-view class="custom-callout">
        <cover-view style="background-color: #fff; padding: 10px; border-radius: 5px;">
          <cover-text style="color: #000;">自定义气泡内容</cover-text>
        </cover-view>
      </cover-view>
    </map>
  </view>
</template>

<script>
export default {
  data() {
    return {
      latitude: 39.909,
      longitude: 116.39742,
      markers: [
        {
          id: 1,
          latitude: 39.909,
          longitude: 116.39742
        }
      ]
    };
  }
};
</script>

<style>
.custom-callout {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>
回到顶部
AI 助手
你好，我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验！