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

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

进入正题:

我使用的uniapp提供的内置组件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)
		},
	}

附完整案例:






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

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

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

你可能感兴趣的:(vue.js,javascript)