uniapp中使用map组件 查看地图线路

官方文档：https://uniapp.dcloud.net.cn/component/map.html#app%E5%B9%B3%E5%8F%B0%E5%9C%B0%E5%9B%BE%E6%9C%8D%E5%8A%A1%E5%95%86%E5%B7%AE%E5%BC%82

<template>
    <view>
        <map :latitude="latitude" :longitude="longitude" scale="14" :polyline="polyline" :markers="markers"></map>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                latitude: 39.8888726387478,
                longitude: 116.40099038098143,
                currentPath: {
                    latitude: null,
                    longitude: null
                },
                markers: [{
                        id: 1,
                        //纬度
                        latitude: 39.8888726387478,
                        //经度
                        longitude: 116.40099038098143,
                        iconPath: "../../static/logo.png",
                        width: 15,
                        height: 15,
                        // title:"芭比歪不",
                        label: {
                            content:  起点 ,
                            color:  #ff0000 
                        }
                        // callout:{
                        //   // content: 歪比巴卜 ,
                        //   // color: #ff0000 
                        // }
                    },
                    {
                        id: 2,
                        //纬度
                        latitude: 39.91481538744656,
                        //经度
                        longitude: 116.37455452893064,
                        iconPath: "../../static/logo.png",
                        width: 20,
                        height: 20,
                        label: {
                            content:  终点 ,
                            color:  #ff0000 
                        }
                    },
                    {
                        id: 3,
                        //纬度
                        latitude: null,
                        //经度
                        longitude: null,
                        iconPath: "../../static/logo.png",
                        width: 15,
                        height: 15,
                        // title:"芭比歪不",
                        label: {
                            content:  当前位置 ,
                            color:  #ff0000 
                        }
                        // callout:{
                        //   // content: 歪比巴卜 ,
                        //   // color: #ff0000 
                        // }
                    },
                ],
                polyline: [{
                    points: [{
                        latitude: 39.8888726387478,
                        longitude: 116.40099038098143
                    }, {
                        latitude: 39.91481538744656,
                        longitude: 116.37455452893064
                    }],
                    color: "#31c27c",
                    width: 10,
                    arrowLine: true,
                    borderWidth: 2
                },
                {
                    points: [
                        {
                            latitude: 39.8888726387478,
                            longitude: 116.40099038098143
                        },{
                        latitude: null,
                        longitude: null
                    }],
                    color: "#04A7FB",
                    width: 10,
                    arrowLine: true,
                    borderWidth: 2
                }]
            }
        },
        created() {
            //获取权限
            // #ifdef MP-WEIXIN 
            uni.authorize({
                scope:  scope.userLocation ,
                success: res => {
                    uni.getLocation({
                        success: res => {
                            console.log(res)
                            console.log( 纬度：  + res.latitude);
                            console.log( 经度：  + res.longitude);
                            this.markers.forEach(item => {
                                if (item.id === 3) {
                                    item.latitude = res.latitude;
                                    item.longitude = res.longitude;
                                }
                            });
                            this.polyline[1].points[1].latitude= res.latitude;
                            this.polyline[1].points[1].longitude= res.longitude;

                            console.log(this.currentPath)
                        }
                    });
                }
            })
            //#endif    
        }
    }
</script>

<style lang="scss" scoped>
    map {
        width: 100vw;
        height: 100vh;
    }
</style>