<template>
<div>
<map name="map" id="map" class="map" :longitude="lng" :latitude="lat" :markers="markers">
<cover-view slot="callout">
<cover-view :marker-id="1" class="callout">
<text>{{text}}</text>
</cover-view>
</cover-view>
</map>
<button @tap="change">修改cllout</button>
</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',
width:30,
height:30,
customCallout:{
display:'ALWAYS',
anchorX: 0,
anchorY: 0,
}
}],
text:'333'
}
},
methods:{
change(){
this.text="66666"
}
}
}
</script>
<style>
.map{
height: 500rpx;
}
.callout{
background-color: aqua;
width: 200rpx;
height: 50rpx;
}
</style>
- 发布:2023-07-14 16:49
- 更新:2023-09-25 15:50
- 阅读:264
产品分类: uniapp/App
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: 64
HBuilderX类型: 正式
HBuilderX版本号: 3.8.7
手机系统: Android
手机系统版本号: Android 13
手机厂商: 小米
手机机型: 小米12X
页面类型: nvue
vue版本: vue2
打包方式: 云端
项目创建方式: HBuilderX
示例代码:
操作步骤:
<template>
<div>
<map name="map" id="map" class="map" :longitude="lng" :latitude="lat" :markers="markers">
<cover-view slot="callout">
<cover-view :marker-id="1" class="callout">
<text>{{text}}</text>
</cover-view>
</cover-view>
</map>
<button @tap="change">修改cllout</button>
</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',
width:30,
height:30,
customCallout:{
display:'ALWAYS',
anchorX: 0,
anchorY: 0,
}
}],
text:'333'
}
},
methods:{
change(){
this.text="66666"
}
}
}
</script>
<style>
.map{
height: 500rpx;
}
.callout{
background-color: aqua;
width: 200rpx;
height: 50rpx;
}
</style>
<template>
<div>
<map name="map" id="map" class="map" :longitude="lng" :latitude="lat" :markers="markers">
<cover-view slot="callout">
<cover-view :marker-id="1" class="callout">
<text>{{text}}</text>
</cover-view>
</cover-view>
</map>
<button @tap="change">修改cllout</button>
</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',
width:30,
height:30,
customCallout:{
display:'ALWAYS',
anchorX: 0,
anchorY: 0,
}
}],
text:'333'
}
},
methods:{
change(){
this.text="66666"
}
}
}
</script>
<style>
.map{
height: 500rpx;
}
.callout{
background-color: aqua;
width: 200rpx;
height: 50rpx;
}
</style>
预期结果:
点击按钮重新赋值customCallout
点击按钮重新赋值customCallout
实际结果:
赋值不成功
赋值不成功
bug描述:
nvue中map上的marker自定义气泡customCallout,第一次赋值显示气泡,再次重新给customCallout内赋值,无法显示新的赋值
1 个回复
izhangshumeng
兄弟,解决了吗