uniapp nvue map中刚踩到的坑 解决markers和polyline不显示

uniapp真是个神奇的框架,文档上明明写着marker,polyline中的部分属性在nvue中支持,结果,别说marker的属性了,marker都没了

解决

还是来看看怎么解决的

这是开始时不能显示marker的代码

<map
	class="my-map"
	id="my-map"
	:style="{ height: mapHeight }"
	:latitude="latitude"
	:longitude="longitude"
	:markers="markers"
	:controls="controlBtns"
	:polyline="polyline"
	:show-location="true"
	@controltap="controlClick"
>map>
export default {
	data() {
		return {
			markers: []//其他属性先忽略掉
		}
	},
	test() {//这个方法是点击一个控件时触发
		let that = this
		var venue = [{
			iconPath: '/static/imgs/end.png',
			id: 1000,
			longitude: '117.17773202688727',
			latitude: '35.08161819398754',
			width: 28,
			height: 33,
			title:'集合点'
		}];
		that.markers.push.apply(that.markers, venue);
	}
}

下面是更改后可以用的代码

<map
	class="my-map"
	id="my-map"
	:style="{ height: mapHeight }"
	:latitude="latitude"
	:longitude="longitude"
	:markers="marker"
	:controls="controlBtns"
	:polyline="polyline"
	:show-location="true"
	@controltap="controlClick"
>map>
export default {
	data() {
		return {
			markers: []
		}
	},
	methods:{
		test() {
			let that = this
			var venue = [{
				iconPath: '/static/imgs/end.png',
				id: 1000,
				longitude: '117.17773202688727',
				latitude: '35.08161819398754',
				width: 28,
				height: 33,
				title:'集合点'
			}];
			that.markers.push.apply(that.markers, venue);
		}
	},
	computed:{
		marker(){
			return this.markers.slice(0)
		}
	}
}

map中绑定的marker不能是在data中的,而是需要在计算属性中返回

路线也是同样的方法

虽然不知道原理,但是这样能用,希望uni官方尽快解决这个问题,解决不了至少也在官方文档里写一下吧,找了好长时间才解决的

你可能感兴趣的:(uni-app)