问题叙述:在项目开发时遇到了这个问题,因项目临时改需求要求展示卫星地图,所以将原先的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线的颜色String8位十六进制表示,后两位表示alpha值,如:#0000AA
width线的宽度Number
dottedLine是否虚线Boolean默认falseApp-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彩虹线Arrayfalse存在时忽略 color 值App-nvue 3.1.0+、微信小程序
level压盖关系,默认为 abovelabelsStringfalse微信小程序

更多介绍请参考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对象数据的变化

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

Logo

前往低代码交流专区

更多推荐