nvue中使用map组件polyline路线不生效
问题叙述:在项目开发时遇到了这个问题,因项目临时改需求要求展示卫星地图,所以将原先的vue组件改成了nvue组件(app中nvue组件才支持卫星地图模式),更改完毕后发现轨迹显示不出来了。进入正题:我使用的uniapp提供的内置组件map组件,贴一下代码<mapclass="map" :longitude="centerlng" :latitude="centerlat" ref="dcma
·
问题叙述:在项目开发时遇到了这个问题,因项目临时改需求要求展示卫星地图,所以将原先的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对象数据的变化
希望能对你有帮助,如果这个答案没有解决你的问题,留下你的评论一起来解决
更多推荐
已为社区贡献1条内容
所有评论(0)