使用uniapp 原生＜map＞组件 问题汇总

一、所用到<map>组件的页面请尽量使用nvue页面

        若在vue页面下使用<map>组件，打包后会出现translateMarker无法移动marker、polyline的arrowLine属性失效路线无法展示箭头等问题。nvue页面写法参考介绍 | uni-app官网。同时使用navigateTo方法跳转发现无法从vue页面跳转nvue页面，后使用relunch或redirectTo解决。

        同时由于nvue页面条件渲染只支持v-if，页面中对数据更新后的页面渲染请搭配$nexttick使用。

二、<map>层级过高

        <map>层级最高，想实现覆盖效果请使用<cover-view>和<cover-image>标签搭配z-index属性使用。

三、为<map>中的属性添加默认值

<map class="map" :style="{'height':mapHeight}" id="myMap" :markers="markers" :polyline="polyline"
				:include-points="polyline[0].points" :latitude="polyline[0].points[0].latitude"
				:longitude="polyline[0].points[0].longitude" />

上述代码中如果longitude等属性没有默认值，在数据还没请求回来之前，页面上的地图不会渲染，获取到数据后再撑大容器展示地图。解决办法是为longitude、latitude等属性添加默认值，在获取数据后改变默认值；或者在页面写一个同地图高宽的空白容器展示代替无数据时候的地图位置，使用加载动画等提高体验。

四、巨坑！polyline中的点位若有连续重复点位时this.mapContext.translateMarker在移动到相应位置时会直接结束方法。

点位

this.polyline[0].points = [
				{latitude: 39.997761, longitude: 116.478935},
                {latitude: 39.997761, longitude: 116.478935},
                {latitude: 39.997761, longitude: 116.478935},
				{latitude: 39.997825, longitude: 116.478939},
				{latitude: 39.998549, longitude: 116.478912},
			]

方法

movePoint() {
			/*
			//也可以用这个方法
			this.mapContext.moveAlong({
				duration: 30000,
				markerId: this.markers[0].id,
				path: this.polyline[0].points
			})
			return
			*/
			this.mapContext.translateMarker({
				duration: this.durationTime,
				markerId: this.markers[0].id,
				destination: {
					latitude: this.polyline[0].points[this.nextPointIndex].latitude,
					longitude: this.polyline[0].points[this.nextPointIndex].longitude
				},
				animationEnd: res => {
					//播放结束，继续移动到下一个点，最后一个点时结束移动
					if (this.nextPointIndex < this.polyline[0].points.length - 1) {
						this.nextPointIndex++
						if (this.startMove) {
							this.movePoint()
						}
					} else {
						this.nextPointIndex = 1
						this.startMove = false
					}
				}
			})
		}

上述代码，marker并不能移动，原因是this.polyline[0].points中的第1、2、3个点位重复，方法只会调用一次，若将重复点位删除，this.mapContext.translateMarker可以正常使用，marker也可以正常移动；目前不清楚是设计如此还是确实有bug，若有需要，请通过reduce等方法将点位数据去重后再生成polyline数据。

原代码地址uniapp实现地图轨迹回放_uniapp地图轨迹_chinahcp2008的博客-CSDN博客

去重

let obj = {}
this.polyline[0].points = allPath.reduce(function(item, next) {
	obj[next.location] ? '' : obj[next.location] = true && item.push(next)
		return item
}, [])

//allPath为格式为[{latitude: 39.997761, longitude: 116.478935}，{latitude: 39.997762, longitude: 116.478935}}的数组.