地图

shuishen

2022-02-23 c016f964a84093ac20629ea6dd5e63c2eb813e4c

地图

 pages/registerUser/map-副本.vue

New file
@@ -0,0 +1,237 @@
<template>
    <view class="registerUser">
        <map style="width:100%;height:85vh;" :latitude="latitude" :polyline="polyline" :longitude="longitude"></map>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                latitude: 40.013305,
                longitude: 118.685713,
                marker: [{
                    id: 0,
                    latitude: 40.013305, //纬度
                    longitude: 118.685713, //经度
                    iconPath: '', //显示的图标        
                    rotate: 0, // 旋转度数
                    width: 20, //宽
                    height: 20, //高
                    title: '你在哪了', //标注点名
                    alpha: 0.5, //透明度
                    label: { //为标记点旁边增加标签   //因背景颜色H5不支持
                        content: '唐山迁安', //文本
                        color: 'red', //文本颜色
                        // 　　fontSize:24,//文字大小
                        //    x:5,//label的坐标，原点是 marker 对应的经纬度
                        //    y:1,//label的坐标，原点是 marker 对应的经纬度 
                        //    borderWidth:12,//边框宽度
                        //    borderColor:'pink',//边框颜色    
                        // 　　borderRadius:20,//边框圆角                        
                        // 　　bgColor:'black',//背景色
                        // 　　padding:5,//文本边缘留白
                        //    textAlign:'right'//文本对齐方式。
                    },
                    callout: { //自定义标记点上方的气泡窗口 点击有效  
                        content: '幸福花园店A组', //文本
                        color: '#ffffff', //文字颜色
                        fontSize: 14, //文本大小
                        borderRadius: 2, //边框圆角
                        bgColor: '#00c16f', //背景颜色
                        display: 'ALWAYS', //常显
                    },
                    // anchor:{//经纬度在标注图标的锚点，默认底边中点
                    //     x:0,    原点为给出的经纬度
                    //     y:0,
                    // }

                }],
                scale: 16,
                polyline: [{ //指定一系列坐标点，从数组第一项连线至最后一项
                    points: [{
                            latitude: 40.013305,
                            longitude: 118.685713
                        },
                        {
                            latitude: 40.013,
                            longitude: 118.685
                        },
                    ],
                    color: "#ff8033", //线的颜色
                    width: 2, //线的宽度
                    dottedLine: false, //是否虚线
                    arrowLine: true, //带箭头的线 开发者工具暂不支持该属性
                }], //地图缩放程度
            }
        },
        methods: {
            // 播放标记点
            playMarkars() {
                if (this.polyline.length == 0) {
                    uni.showModal({
                        content: '当前时间范围内没有轨迹，无法播放！',
                    })
                    this.isPlay = false // 无
                    this.playIndex = 0 // 第一个
                    return
                }
                this.playIndex = Math.min(this.points.length - 1, this.playIndex)
                this.markers = [this.formatMarker(this.points[this.playIndex++], 'ALWAYS')]
                this.timer = setInterval(_ => {
                    var i = this.playIndex++
                    this.nextAdaress(i);
                    if (i >= this.points.length) {
                        clearInterval(this.timer)
                        this.isPlay = false
                        this.playIndex = 0
                        this.initMarkers()
                        return
                    }
                    this.markers = [this.formatMarker(this.points[i], 'ALWAYS')]
                }, 1000)
            },

            formatMarker(point, display = "BYCLICK") {
                let content = [
                    "时间：" + parseTime(point.create_time),
                    "运动状态：" + (point.sport == 1 ? '运动' : '静止'),
                    "地址：" + point.address || ''
                ]
                return {
                    id: point.id,
                    iconPath: '/static/dada.png',
                    width: 35,
                    height: 35,
                    latitude: point.latitude,
                    longitude: point.longitude,
                    callout: {
                        display: display,
                        padding: 10,
                        borderRadius: 5,
                        content: content.join("\n")
                    }
                }
            },
            nextAdaress(index) {
                const len = 10;
                if (this.isGetAddress) {
                    return
                }
                for (let i = 0; i < len; i++) {
                    if (!this.points[i + index]) {
                        break
                    }
                    if (this.points[i + index].address === undefined) {
                        this.isGetAddress = true
                        this.getAddress(i + index, len * 2, _ => {
                            this.isGetAddress = false
                        });
                        break
                    }
                }
            },

        },
        onReady() {},
        watch: {


        }
    };
</script>
</script>

<style lang="scss" scoped>
    .login-map-bc {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 111;
        background: rgba(0, 0, 0, .3);
    }

    .login-map-content {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 222;
        border-radius: 15px 15px 0 0;
        overflow: hidden;

        iframe {
            border: none;
        }
    }

    .login-map-close {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 20px;
        height: 20px;
        z-index: 11;
    }

    .warp {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
    }

    .rect {
        text-align: center;
        width: 120px;
        height: 120px;
    }

    .submit {
        margin: 30rpx 50rpx 50rpx;
        border: none;
        width: 572rpx;
        height: 86rpx;
        line-height: 86rpx;
        box-sizing: border-box;
        border-radius: 15rpx;
        background-color: #103289;
        color: #ffffff;

        &::after {
            content: none;
        }

        &::before {
            content: none;
        }

        &[disabled='true'] {
            background: #e4e4e4;
            font-size: 36rpx;
            font-family: Source Han Sans CN;
            font-weight: 500;
            color: #ffffff;
        }
    }

    .registerUser {
        padding: 0 1.2rem;
    }

    .agree {
        margin: 27rpx 95rpx 0;
        font-size: 22rpx;
        font-family: Adobe Heiti Std;
        font-weight: normal;
        color: #cacaca;
        line-height: 34rpx;

        .a {
            color: #000000;
        }
    }
</style>