<template>
<view id="concat">
<map class="pr" style="width: 100%; height: 300px" :latitude="latitude" :longitude="longitude" :markers="markers">
</map>
</view>
</template>
<script>
export default {
data() {
return {
latitude: 26.072381,
longitude: 119.311519,
startData: {
screenX: "",
screenY: "",
},
markers: [
{
id: 0,
latitude: 26.072381,
longitude: 119.311519,
iconPath: "/static/logo.png",
title: "这里是文本",
callout: {
// display: "ALWAYS",
content: "这里是文本",
bgColor: "#fff",
textAlign: "center",
padding: "4",
},
},
],
};
},
},
};
</script>
<style>
.input {
width: 100%;
height: 100rpx;
background-color: aqua;
}
.drag {
width: 750px;
height: 80rpx;
background-color: blanchedalmond;
position: absolute;
bottom: 0;
}
</style>
![1***@163.com](http://img-cdn-tc.dcloud.net.cn/uploads/avatar/001/46/16/46_avatar_mid.jpg?v=1730171695)
- 发布:2021-11-30 11:43
- 更新:2021-12-15 15:27
- 阅读:929
产品分类: uniapp/App
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: 2017.8
HBuilderX类型: 正式
HBuilderX版本号: 3.2.16
手机系统: Android
手机系统版本号: Android 12
手机厂商: 华为
手机机型: 小米
页面类型: nvue
vue版本: vue2
打包方式: 云端
项目创建方式: HBuilderX
示例代码:
操作步骤:
<template>
<view id="concat">
<map class="pr" style="width: 100%; height: 300px" :latitude="latitude" :longitude="longitude" :markers="markers">
</map>
</view>
</template>
<script>
export default {
data() {
return {
latitude: 26.072381,
longitude: 119.311519,
startData: {
screenX: "",
screenY: "",
},
markers: [
{
id: 0,
latitude: 26.072381,
longitude: 119.311519,
iconPath: "/static/logo.png",
title: "这里是文本",
callout: {
// display: "ALWAYS",
content: "这里是文本",
bgColor: "#fff",
textAlign: "center",
padding: "4",
},
},
],
};
},
},
};
</script>
<style>
.input {
width: 100%;
height: 100rpx;
background-color: aqua;
}
.drag {
width: 750px;
height: 80rpx;
background-color: blanchedalmond;
position: absolute;
bottom: 0;
}
</style>
<template>
<view id="concat">
<map class="pr" style="width: 100%; height: 300px" :latitude="latitude" :longitude="longitude" :markers="markers">
</map>
</view>
</template>
<script>
export default {
data() {
return {
latitude: 26.072381,
longitude: 119.311519,
startData: {
screenX: "",
screenY: "",
},
markers: [
{
id: 0,
latitude: 26.072381,
longitude: 119.311519,
iconPath: "/static/logo.png",
title: "这里是文本",
callout: {
// display: "ALWAYS",
content: "这里是文本",
bgColor: "#fff",
textAlign: "center",
padding: "4",
},
},
],
};
},
},
};
</script>
<style>
.input {
width: 100%;
height: 100rpx;
background-color: aqua;
}
.drag {
width: 750px;
height: 80rpx;
background-color: blanchedalmond;
position: absolute;
bottom: 0;
}
</style>
预期结果:
预期callout中添加 // display: "ALWAYS",气泡显示在上方
预期callout中添加 // display: "ALWAYS",气泡显示在上方
实际结果:
预期callout中添加 // display: "ALWAYS",气泡覆盖图标
预期callout中添加 // display: "ALWAYS",气泡覆盖图标
bug描述:
map组件 markers属性添加callout 设置属性 display: "ALWAYS"时气泡覆盖图标,取消设置可以正常。
用的是subnvue渲染到vue页面的情况,代码是写在nvue页面。
![](http://img-cdn-tc.dcloud.net.cn/uploads/questions/20211130/f8c0858dd50df8005f53951e7caa6b3e.jpg)
![](http://img-cdn-tc.dcloud.net.cn/uploads/questions/20211130/933258614bd823d3af7b3d20afdaf038.jpg)