From c016f964a84093ac20629ea6dd5e63c2eb813e4c Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Wed, 23 Feb 2022 16:25:35 +0800
Subject: [PATCH] 地图
---
pages/registerUser/map-副本.vue | 237 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 237 insertions(+), 0 deletions(-)
diff --git "a/pages/registerUser/map-\345\211\257\346\234\254.vue" "b/pages/registerUser/map-\345\211\257\346\234\254.vue"
new file mode 100644
index 0000000..3ac2956
--- /dev/null
+++ "b/pages/registerUser/map-\345\211\257\346\234\254.vue"
@@ -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>
--
Gitblit v1.9.3