任务地图路线回显

xiebin

2022-09-30 9d6bdb7f226548b75501f53e45063d747faf3dd2

任务地图路线回显

 manifest.json

@@ -90,6 +90,15 @@
        "router" : {
            "mode" : "hash",
            "base" : "/rider/"
        },
        "sdkConfigs": {
            "maps": {
                "amap": {
                    "key": "7fa69abe1defd5888bb85bc736cda874",
                    "securityJsCode": "8ac9e5f522c62ed6e3a5800a87b0d140",
                    "serviceHost": ""
                }
            }
        }
    }
}

 pages/taskinfo/detail.vue

@@ -1,7 +1,7 @@
<template>
    <view class="content">
        <u-top-tips ref="uTips"></u-top-tips>
        <map style="width: 100%; height: 30vh;" scale="14" :latitude="latitude" :longitude="longitude"
        <map id="map" style="width: 100%; height: 30vh;" scale="14" :latitude="latitude" :longitude="longitude"
            :polyline="polyline">
            <!-- <cover-view class="dingwBut" @click="getSelfLocation">
                <cover-image src="../../static/images/taskinfo/map/img/dingwei.png"></cover-image>
@@ -67,41 +67,28 @@
            return {
                id: 0,
                taskinfoData: {},
                _mapContext: null,
                latitude: '',
                longitude: '',
                polyline: [{
                    // LINESTRING(115.91024735502 28.6783047633229, 115.916073731654 28.6741777439167, 
                    // 115.908426611165 28.6739956695312)
                    points: [
                        // {
                        //     latitude: 28.6783047633229,
                        //     longitude: 115.91024735502
                        // },
                        // {
                        //     latitude: 28.6741777439167,
                        //     longitude: 115.916073731654
                        // },
                        // {
                        //     latitude: 28.6739956695312,
                        //     longitude: 115.908426611165
                        // }
                    ],
                polyline: null,
                //路线默认属性
                polylineObj: {
                    color: "#10a4ff", //线的颜色
                    width: 10, //线的宽度
                    dottedLine: false, //是否虚线
                    arrowLine: false, //带箭头的线 开发者工具暂不支持该属性
                }]
                },
            }
        },
        methods: {
            getSelfLocation() {
                var that = this;
                var _that = this;
                uni.getLocation({
                    type: 'gcj02',
                    isHighAccuracy: true,
                    success(res) {
                        that.latitude = res.latitude
                        that.longitude = res.longitude
                        _that.latitude = res.latitude
                        _that.longitude = res.longitude
                    }
                })
            },
@@ -109,19 +96,30 @@
                var _that = this
                getDetail(_that.id).then(res => {
                    _that.taskinfoData = res.data;
                    let routeRange = _that.taskinfoData.routeRange
                    if (routeRange) {
                    //处理地图路线 //
                    let routeRange = _that.taskinfoData.routeRange.replace('LINESTRING', '')
                        routeRange = _that.taskinfoData.routeRange.replace('LINESTRING', '')
                        .replace('\(', '').replace('\)', '')
                    let ranges = routeRange.split(',')
                        var pointsArr = []
                    for (var i = 0; i < ranges.length; i++) {
                        let postion = ranges[i].split(' ')
                        _that.polyline[0].points.push({
                            var points = {
                            longitude: postion[0],
                            latitude: postion[1]
                        })
                    }
                    _that.longitude = _that.polyline[0].points[0].longitude
                    _that.latitude = _that.polyline[0].points[0].latitude
                            pointsArr.push(points)

                        }
                        _that.polylineObj.points = pointsArr
                        _that.polyline = [_that.polylineObj]
                        _that.longitude = ranges[0].split(' ')[0]
                        _that.latitude = ranges[0].split(' ')[1]

                    } else {
                        _that.getSelfLocation() //如果没有绘制路线显示当前位置地图
                    }
                })

            }
@@ -131,6 +129,9 @@
                this.id = options.id
                this.getTaskinfoDetail()
            }
        },
        onReady() {
            console.log(this.polyline)
        }
    }
</script>