uni-app subNVues 中使用MAP组件无法动态添加 MARKER
uni-app subNVues 中使用MAP组件无法动态添加 MARKER
bug描述:
项目需要,用 subNVues 展示地图并实时记录运动轨迹,中途会拍照,并把照片显示在运动轨迹上。定义在DATA里面的MARKER能显示,的运行中动态添加到的markers,无法显示,已使用两种方式(直接添加到data-markers数组和使用createMapContext创建的对象调用addMarkers方法)添加,均无法显示。
| 属性 | 值 |
|---|---|
| PC开发环境操作系统 | Windows |
| PC开发环境操作系统版本号 | WINDOWS 10 |
| HBuilderX类型 | 正式 |
| HBuilderX版本号 | 3.3.5 |
| 手机系统 | Android |
| 手机系统版本号 | Android 10 |
| 手机厂商 | 小米 |
| 手机机型 | 红米10X PRO |
| 页面类型 | nvue |
| vue版本 | vue2 |
| 打包方式 | 云端 |
| 项目创建方式 | HBuilderX |
示例代码:
<view class="wraper">
<map class="map" id="mymap" ref="mymap"
:show-location="true"
:latitude="latitude"
:longitude="longitude"
:scale = "scale"
:markers="cmarks">
</map>
<view class="footer">
<button type="primary" @click="addMarker1">添加QQ</button>
<button type="warn" @click="addMarker2">添加WX</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
latitude:30.71886,
longitude:103.851805,
scale:13,
markers:[{
id:0,
latitude:30.71886,
longitude:103.851805,
iconPath:"/static/mypos.png"
},{
id:1,
latitude:30.718179,
longitude:103.851261,
iconPath:"/static/potral0.png"
}],
testPoints:[
{longitude:103.853154,latitude:30.716468},
{longitude:103.854654,latitude:30.717081},
{longitude:103.853893,latitude:30.71763},
{longitude:103.853578,latitude:30.718862},
{longitude:103.853147,latitude:30.720182},
{longitude:103.852303,latitude:30.721532},
{longitude:103.85124,latitude:30.721024},
{longitude:103.84932,latitude:30.720756},
{longitude:103.848296,latitude:30.719343},
{longitude:103.847883,latitude:30.718816},
{longitude:103.849485,latitude:30.718018},
{longitude:103.849485,latitude:30.718018},
{longitude:103.851171,latitude:30.715897}
],
qqIndex:0,
wxIndex:0,
mymap:null
}
},
onReady(){
this.mymap = uni.createMapContext("mymap",this);
},
computed:{
cmarks(){
return this.markers
}
},
methods: {
addMarker1:function(){
if(this.qqIndex < this.testPoints.length){
let point = this.testPoints[this.qqIndex];
let markers = this.markers;
let qqId = this.qqIndex+100;
markers.push({
id:qqId,
latitude:point.latitude,
longitude:point.longitude,
iconPath:"/static/qq.png"
});
this.markers = markers;
console.log(this.markers)
this.qqIndex = this.qqIndex+1;
}
},
addMarker2:function(){
if(this.wxIndex < this.testPoints.length){
let point = this.testPoints[this.wxIndex];
let mks = [];
let wxId = this.wxIndex+300;
this.wxIndex = this.wxIndex+1;
mks.push({
id:wxId,
latitude:point.latitude,
longitude:point.longitude,
iconPath:"/static/weixin.png"
});
this.mymap.addMarkers({
markers:mks
});
}
}
}
}
</script>
<style>
.wraper{
flex:1;
}
.map{
flex:1;
}
.footer{
padding: 20rpx 30rpx;
}
</style>
更多关于uni-app subNVues 中使用MAP组件无法动态添加 MARKER的实战教程也可以访问 https://www.itying.com/category-93-b0.html
2 回复
请提供完整示例demo项目 我们这边测试复现下问题
更多关于uni-app subNVues 中使用MAP组件无法动态添加 MARKER的实战教程也可以访问 https://www.itying.com/category-93-b0.html
这是完整的APP DEMO

