<template>
<div>
<map name="map" id="map" class="map" :longitude="lng" :latitude="lat" :markers="markers">
<cover-view slot="callout">
<cover-view :marker-id="2" class="callout">
<text>12121212</text>
</cover-view>
</cover-view>
</map>
</div>
</template>
<script>
export default {
data(){
return{
lng:'115.86684363433837',
lat:'28.689214453586604',
markers:[{
id:1,
latitude:"28.689214453586604",
longitude:'115.86684363433837',
iconPath:'/static/logo.png',
title:'1212',
width:30,
height:30,
customCallout:{
display:'ALWAYS',
anchorX: 0,
anchorY: 0,
}
}],
}
}
}
</script>
<style>
.map{
height: 500rpx;
}
.callout{
background-color: aqua;
width: 200rpx;
height: 50rpx;
}
</style>
武点点
- 发布：2023-07-10 17:58
- 更新：2023-07-10 20:18
- 阅读：654
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： 64
HBuilderX类型： 正式
HBuilderX版本号： 3.8.4
手机系统： Android
手机系统版本号： Android 13
手机厂商： 小米
手机机型： 小米12X
页面类型： nvue
vue版本： vue2
打包方式： 云端
项目创建方式： HBuilderX
示例代码：
操作步骤：
新建地图，需展示标点maker及其自定义气泡信息
<map name="map" id="map" class="map" :longitude="lng" :latitude="lat" :markers="markers">
<cover-view slot="callout">
<cover-view :marker-id="2" class="callout">
<text>12121212</text>
</cover-view>
</cover-view>
</map>
新建地图，需展示标点maker及其自定义气泡信息
<map name="map" id="map" class="map" :longitude="lng" :latitude="lat" :markers="markers">
<cover-view slot="callout">
<cover-view :marker-id="2" class="callout">
<text>12121212</text>
</cover-view>
</cover-view>
</map>预期结果：
标点及其图标正常出现，自定义气泡也出现
标点及其图标正常出现，自定义气泡也出现
实际结果：
标点及其图标正常出现，自定义气泡未能出现
标点及其图标正常出现，自定义气泡未能出现
bug描述：
map组件customCallout自定义气泡不显示。
1 个回复
DCloud_UNI_Anne
注意：内部的 cover-view 通过 marker-id 属性与 marker 绑定。cover-view 嵌套使用时，内部不可直接写文本节点，需要使用 cover-view 包裹。