nvue中使用map组件polyline路线不生效

问题叙述：在项目开发时遇到了这个问题，因项目临时改需求要求展示卫星地图，所以将原先的vue组件改成了nvue组件（app中nvue组件才支持卫星地图模式），更改完毕后发现轨迹显示不出来了。

进入正题：

我使用的uniapp提供的内置组件map组件，贴一下代码

	<map class="map" longitude="105.807244" latitude="37.718127" ref="dcmap" :polyline="polylineObj"
			 :scale="15" enable-satellite="true" :enable-poi='true' :enable-building='true'
			:enable-indoorMap='true'></map>

//polyline:路线
//

相信看到这个帖子的工程师已经对map组件的一些内置方法大致了解过了；

简单的介绍一下polyline属性 

polyline

指定一系列坐标点，从数组第一项连线至最后一项

属性	说明	类型	必填	备注	平台差异说明
points	经纬度数组	Array	是	[{latitude: 0, longitude: 0}]
color	线的颜色	String	否	8位十六进制表示，后两位表示alpha值，如：#0000AA
width	线的宽度	Number	否
dottedLine	是否虚线	Boolean	否	默认false	App-nvue 2.1.5+、微信小程序、H5、百度小程序、支付宝小程序、京东小程序
arrowLine	带箭头的线	Boolean	否	默认false，微信小程序开发者工具暂不支持该属性	App-nvue 2.1.5+、微信小程序、百度小程序、京东小程序
arrowIconPath	更换箭头图标	String	否	在arrowLine为true时生效	App-nvue 2.1.5+、微信小程序、百度小程序、京东小程序
borderColor	线的边框颜色	String	否		微信小程序、H5、百度小程序、京东小程序
borderWidth	线的厚度	Number	否		微信小程序、H5、百度小程序、京东小程序
colorList	彩虹线	Array	false	存在时忽略 color 值	App-nvue 3.1.0+、微信小程序
level	压盖关系，默认为 abovelabels	String	false		微信小程序

更多介绍请参考uniapp官网：map | uni-app官网

应用场景：再利用到polyline这个属性时,肯定是异步去请求接口来完成路线显示的。所以我们在data中去定义一个变量polylineObj

export default {
    data(){
        return {
                polylineObj:[]
                }
          }
}

定义好之后需要去请求数据（我们在onload里面模拟数据请求）

export default {
		data() {
			return {
				polylineObj: [],
			};
		},
		onLoad() {
			setTimeout(_ => {
				//例如这是请求过来的数据
				const pointList = [{
						"latitude": 37.718127,
						"longitude": 105.807244
					},
					{
						"latitude": 37.718127,
						"longitude": 105.807244
					}, {
						"latitude": 37.718127,
						"longitude": 105.807244
					}, {
						"latitude": 37.718135,
						"longitude": 105.807249
					}, {
						"latitude": 37.718143,
						"longitude": 105.807253
					}, {
						"latitude": 37.718164,
						"longitude": 105.807264
					}, {
						"latitude": 37.718185,
						"longitude": 105.807275
					}, {
						"latitude": 37.718206,
						"longitude": 105.807286
					}, {
						"latitude": 37.7199999,
						"longitude": 105.807297
					}
				]
				//这里是关键，这里是赋值
				this.polylineObj = [{
					points: pointList,
					arrowLine: true, //配置项：带箭头的线
					arrowIconPath: "/static/point.png", //配置项：更换箭头图标
					width: 10, //配置项：线的宽度
				}, ]
			}, 2000)
		},
	}

附完整案例：

<template>
	<view>
		<!-- 这里的数据全部先写死 -->
		<map class="map" longitude="105.807244" latitude="37.718127" ref="dcmap" :polyline="polylineObj"
			 :scale="15" enable-satellite="true" :enable-poi='true' :enable-building='true'
			:enable-indoorMap='true'></map>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				polylineObj: [],
			};
		},
		onLoad() {
			setTimeout(_ => {
				//例如这是请求过来的数据
				const pointList = [{
						"latitude": 37.718127,
						"longitude": 105.807244
					},
					{
						"latitude": 37.718127,
						"longitude": 105.807244
					}, {
						"latitude": 37.718127,
						"longitude": 105.807244
					}, {
						"latitude": 37.718135,
						"longitude": 105.807249
					}, {
						"latitude": 37.718143,
						"longitude": 105.807253
					}, {
						"latitude": 37.718164,
						"longitude": 105.807264
					}, {
						"latitude": 37.718185,
						"longitude": 105.807275
					}, {
						"latitude": 37.718206,
						"longitude": 105.807286
					}, {
						"latitude": 37.7199999,
						"longitude": 105.807297
					}
				]
				//这里是关键，这里是赋值
				this.polylineObj = [{
					points: pointList,
					arrowLine: true, //配置项：带箭头的线
					arrowIconPath: "/static/point.png", //配置项：更换箭头图标
					width: 10, //配置项：线的宽度
				}, ]
			}, 2000)
		},
	}
</script>

<style >
	.map{
		height: 600rpx;
	}
</style>

 总结：不显示的路线原因：在data中定义polyloneObj时将数据结构（配置项）写好，然后在请求回来数据时改变polylineObj[0].points的值,这时数据添加上但是路线不显示，所以在请求数据后直接对polylineObj进行赋值操作，不要只改变对象内points参数的值

盲猜是map组件内部没有深度监听polyline对象数据的变化

希望能对你有帮助，如果这个答案没有解决你的问题，留下你的评论一起来解决