<template>
<view class="container">
<map style="width: 100vw;height: 100vh;" id="map" longitude="116.397" latitude="39.9" scale="14" :markers="markers"
@markertap="tapMap">
<cover-view slot="callout" >
<cover-view :marker-id="1" class="custom-callout">
定位位置:这是定位位置
</cover-view>
<cover-view></cover-view>
</cover-view>
</map>
</view>
</template>
<script>
export default {
data() {
return {
markers: [{
id: 1,
latitude: 39.9,
longitude: 116.397,
title: '标记点',
iconPath: '/static/img/default/head.png',
// callout: {
// color: '#ffffff', //文字颜色
// fontSize: 15, //文本大小
// borderRadius: 15, //边框圆角
// padding: '10',
// bgColor: '#406390', //背景颜色
// content: '123456',
// }, //设置点击后显示的文字及其样式
customCallout: {
anchorY: 10,
anchorX: 10,
display: 'ALWAYS'
},
width: 20, //控件宽
height: 20 //控件高
}]
}
},
methods: {
tapMap(e) {
console.log(e);
}
}
}
</script>
<style>
.callout-content {
width: 100px;
padding: 10px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.custom-callout {
background: rgba(0, 0, 0, 0.7);
color: #fff;
border-radius: 4px;
padding: 8px;
font-size: 14px;
white-space: normal;
line-height: normal;
/* 防止文本换行 */
}
</style> 
9***@qq.com
- 发布：2024-04-23 14:46
- 更新：2024-04-23 16:34
- 阅读：209
产品分类： uniapp/App
PC开发环境操作系统： Mac
PC开发环境操作系统版本号： macos 12.7
HBuilderX类型： 正式
HBuilderX版本号： 3.99
手机系统： iOS
手机系统版本号： iOS 17
手机厂商： 苹果
手机机型： iphone12
页面类型： vue
vue版本： vue2
打包方式： 云端
项目创建方式： HBuilderX
示例代码：
操作步骤：
直接运行代码片段，接入的百度地图
直接运行代码片段，接入的百度地图
预期结果：
map组件自定义气泡真机app可以显示
map组件自定义气泡真机app可以显示
实际结果：
map组件自定义气泡真机app显示不了
map组件自定义气泡真机app显示不了
bug描述：
map组件自定义气泡真机app显示不了
9***@qq.com (作者)
确实，nvue可以显示，vue搞不出来
2024-04-24 15:24
blackhole7878
回复 9***@qq.com: 用vue也行，但是cover-view好像是不能嵌套的。反正用nvue是最好的选择。
2024-04-24 17:58