<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>

- 发布:2021-11-30 11:43
- 更新:2021-12-15 15:27
- 阅读:974
产品分类: 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页面。

