任务地图路线回显

xiebin

2022-09-30 9d6bdb7f226548b75501f53e45063d747faf3dd2

任务地图路线回显

 manifest.json

@@ -1,95 +1,104 @@
{
    "name" : "Rider",
    "appid" : "__UNI__C29A206",
    "description" : "",
    "versionName" : "1.0.0",
    "versionCode" : "100",
    "transformPx" : false,
    /* 5+App特有相关 */
    "app-plus" : {
        "safearea" : {
            "bottom" : {
                "offset" : "none"
            }
        },
        "usingComponents" : true,
        "nvueCompiler" : "uni-app",
        "compilerVersion" : 3,
        "splashscreen" : {
            "alwaysShowBeforeRender" : true,
            "waiting" : true,
            "autoclose" : true,
            "delay" : 0
        },
        /* 模块配置 */
        "modules" : {
            "Geolocation" : {}
        },
        /* 应用发布信息 */
        "distribute" : {
            /* android打包配置 */
            "android" : {
                "permissions" : [
                    "<uses-feature android:name=\"android.hardware.camera\"/>",
                    "<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
                    "<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>",
                    "<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\"/>",
                    "<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
                    "<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
                    "<uses-permission android:name=\"android.permission.CALL_PHONE\"/>",
                    "<uses-permission android:name=\"android.permission.CAMERA\"/>",
                    "<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
                    "<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
                    "<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
                    "<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
                    "<uses-permission android:name=\"android.permission.MODIFY_AUDIO_SETTINGS\"/>",
                    "<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
                    "<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
                    "<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
                    "<uses-permission android:name=\"android.permission.RECORD_AUDIO\"/>",
                    "<uses-permission android:name=\"android.permission.VIBRATE\"/>",
                    "<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
                    "<uses-permission android:name=\"android.permission.WRITE_CONTACTS\"/>",
                    "<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
                ]
            },
            /* ios打包配置 */
            "ios" : {},
            /* SDK配置 */
            "sdkConfigs" : {
                "ad" : {},
                "geolocation" : {
                    "system" : {
                        "__platform__" : [ "ios", "android" ]
                    }
                }
            }
        }
    },
    /* 快应用特有相关 */
    "quickapp" : {},
    /* 小程序特有相关 */
    "mp-weixin" : {
        "appid" : "wxc256e348c4032ebd",
        "setting" : {
            "urlCheck" : false
        },
        "usingComponents" : true
    },
    "mp-alipay" : {
        "usingComponents" : true
    },
    "mp-baidu" : {
        "usingComponents" : true
    },
    "mp-toutiao" : {
        "usingComponents" : true
    },
    "h5" : {
        "template" : "template.h5.html",
        "router" : {
            "mode" : "hash",
            "base" : "/rider/"
        }
    }
    "name": "Rider",
    "appid": "__UNI__C29A206",
    "description": "",
    "versionName": "1.0.0",
    "versionCode": "100",
    "transformPx": false,
    /* 5+App特有相关 */
    "app-plus": {
        "safearea": {
            "bottom": {
                "offset": "none"
            }
        },
        "usingComponents": true,
        "nvueCompiler": "uni-app",
        "compilerVersion": 3,
        "splashscreen": {
            "alwaysShowBeforeRender": true,
            "waiting": true,
            "autoclose": true,
            "delay": 0
        },
        /* 模块配置 */
        "modules": {
            "Geolocation": {}
        },
        /* 应用发布信息 */
        "distribute": {
            /* android打包配置 */
            "android": {
                "permissions": [
                    "<uses-feature android:name=\"android.hardware.camera\"/>",
                    "<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
                    "<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>",
                    "<uses-permission android:name=\"android.permission.ACCESS_FINE_LOCATION\"/>",
                    "<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
                    "<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
                    "<uses-permission android:name=\"android.permission.CALL_PHONE\"/>",
                    "<uses-permission android:name=\"android.permission.CAMERA\"/>",
                    "<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
                    "<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
                    "<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
                    "<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
                    "<uses-permission android:name=\"android.permission.MODIFY_AUDIO_SETTINGS\"/>",
                    "<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
                    "<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
                    "<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
                    "<uses-permission android:name=\"android.permission.RECORD_AUDIO\"/>",
                    "<uses-permission android:name=\"android.permission.VIBRATE\"/>",
                    "<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
                    "<uses-permission android:name=\"android.permission.WRITE_CONTACTS\"/>",
                    "<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
                ]
            },
            /* ios打包配置 */
            "ios": {},
            /* SDK配置 */
            "sdkConfigs": {
                "ad": {},
                "geolocation": {
                    "system": {
                        "__platform__": ["ios", "android"]
                    }
                }
            }
        }
    },
    /* 快应用特有相关 */
    "quickapp": {},
    /* 小程序特有相关 */
    "mp-weixin": {
        "appid": "wxc256e348c4032ebd",
        "setting": {
            "urlCheck": false
        },
        "usingComponents": true
    },
    "mp-alipay": {
        "usingComponents": true
    },
    "mp-baidu": {
        "usingComponents": true
    },
    "mp-toutiao": {
        "usingComponents": true
    },
    "h5": {
        "template": "template.h5.html",
        "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.replace('LINESTRING', '')
                        .replace('\(', '').replace('\)', '')
                    let ranges = routeRange.split(',')
                    for (var i = 0; i < ranges.length; i++) {
                        let postion = ranges[i].split(' ')
                        _that.polyline[0].points.push({
                            longitude: postion[0],
                            latitude: postion[1]
                        })
                    let routeRange = _that.taskinfoData.routeRange
                    if (routeRange) {
                        //处理地图路线 //
                        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(' ')
                            var points = {
                                longitude: postion[0],
                                latitude: postion[1]
                            }
                            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() //如果没有绘制路线显示当前位置地图
                    }
                    _that.longitude = _that.polyline[0].points[0].longitude
                    _that.latitude = _that.polyline[0].points[0].latitude
                })

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