From 53f5367d635ecfde9ceb36fe3bcafa86c32275a8 Mon Sep 17 00:00:00 2001
From: liuyg <liuyg@qq.com>
Date: Tue, 22 Feb 2022 16:41:04 +0800
Subject: [PATCH] +地图更新成uniapp
---
pages/grabOrders/map.vue | 590 ++++++++++++++++++++++++++++++++++++++++++++++++++++------
1 files changed, 524 insertions(+), 66 deletions(-)
diff --git a/pages/grabOrders/map.vue b/pages/grabOrders/map.vue
index 5f02d6d..4607d20 100644
--- a/pages/grabOrders/map.vue
+++ b/pages/grabOrders/map.vue
@@ -2,11 +2,95 @@
<view class="content">
<u-top-tips ref="uTips"></u-top-tips>
<!-- <u-button type="info" @click="acc">测试</u-button> -->
- <web-view :src="urls" @message="message"></web-view>
+ <!-- <web-view :src="urls" @message="message"></web-view> -->
+ <map :scale='18' id="myMap" style="width: 100%;" :style="{height: mapHeight + 'px'}" :markers="markers"
+ :longitude="longitude" :latitude="latitude" :circles="circles" :polyline="polylines"></map>
+ <view id="Umain">
+ <view class="once-b">
+ 任务详情
+ </view>
+ <view class="once">
+ <span class="once-left">
+ 任务标题
+ </span>
+ <span class="once-right">
+ {{ourData.rname}}
+ </span>
+ </view>
+ <view class="once">
+ <span class="once-left">
+ 任务内容
+ </span>
+ <span class="once-right">
+ {{ourData.content}}
+ </span>
+ </view>
+ <view class="once">
+ <span class="once-left">
+ 发布者
+ </span>
+ <span class="once-right">
+ <span>{{ourData.fname}}</span>
+ </span>
+ </view>
+ <view class="once">
+ <span class="once-left">
+ 任务地区
+ </span>
+ <span class="once-right">
+ {{ourData.province}} - {{ourData.city}} - {{ourData.district}}
+ </span>
+ </view>
+ <view class="once">
+ <span class="once-left">
+ 开始时间
+ </span>
+ <span class="once-right">
+ {{ourData.time}}
+ </span>
+ </view>
+ <view class="once">
+ <span class="once-left">
+ 人数
+ </span>
+ <span class="once-right">
+ {{ourData.num}} / {{ourData.jnum}}
+ </span>
+ </view>
+ <view class="once">
+ <span class="once-left">
+ 队长
+ </span>
+ <span class="once-right">
+ <span>{{ourData.captain}}</span>
+ </span>
+ </view>
+ <view class="once">
+ <span class="once-left">
+ 参与者
+ </span>
+ <span class="once-right">
+ <span v-for="(item,index) in ourData.team">{{item}}</span>
+ </span>
+ </view>
+ <view class="once-c" v-if="ourData.buttype == 0">
+ <u-button :type="ourData.butCT == 'beginUp'?'primary':ourData.butCT == 'begin'?'success':'info'"
+ @click="openAPP(ourData.buttype)" :disabled="ourData.butCT== 'over' || ourData.iscation == '0'">
+ {{ourData.butCT == 'beginUp'?(ourData.iscation == '0'?'正在进行':'上传反馈'):ourData.butCT == 'begin'?(ourData.iscation == '0'?'还未开始':'开始任务'):'任务完成'}}
+ </u-button>
+ </view>
+ <view class="once-c" v-if="ourData.buttype == 1">
+ <u-button :type="ourData.num==ourData.jnum?'info':'success'" @click="openAPP(ourData.buttype)"
+ :disabled="(ourData.num==ourData.jnum)&& ourData.buttype==1 ||ourData.type == 1">
+ {{ourData.num==ourData.jnum?"人数已满":'我参与'}}
+ </u-button>
+ </view>
+ </view>
</view>
</template>
<script>
+ import $moveWindow from "./map/js/move.js"
export default {
data() {
return {
@@ -16,9 +100,38 @@
rid: '',
webV: null,
wv: null,
+ latitude: 28.687205773173343,
+ longitude: 115.8995839881188,
+ circles: [], //圆
+ markers: [], //标记点
+ polylines: [{ //指定一系列坐标点，从数组第一项连线至最后一项
+ points: [{
+ latitude: 40.013305,
+ longitude: 118.685713
+ },
+ {
+ latitude: 40.013,
+ longitude: 118.685
+ },
+ ],
+ color: "#FE0000", //线的颜色
+ width: 4, //线的宽度
+ dottedLine: false, //是否虚线
+ arrowLine: false, //带箭头的线 开发者工具暂不支持该属性
+ }],
+ useTime: null,
+ useTimeSet: null,
+ times: 3000,
+ setTimes: 30000,
+ ourData: {},
+ map: null,
+ domMove: null,
}
},
methods: {
+ openAPP(val){
+
+ },
message(event) {
let data = event.detail.data;
@@ -35,6 +148,146 @@
} else {
this.wv.evalJS(`requestData(${param})`);
}
+ },
+ timeBegin(val) {
+ let that = this;
+ if (this.useTime) {
+ return
+ } else {
+ if (val == 1) {
+ that.getLocationInfo();
+ }
+ this.useTime = setTimeout(() => {
+ that.getLocationInfo();
+ clearTimeout(this.useTime);
+ that.useTime = null;
+ that.timeBegin();
+ }, that.times)
+ }
+ },
+ timeBeginSet(d) {
+ let that = this;
+ if (this.useTimeSet) {
+ return
+ } else {
+ this.useTimeSet = setTimeout(() => {
+ that.$store.commit("setMsg", d)
+ clearTimeout(this.useTime);
+ that.useTime = null;
+ }, that.setTimes)
+ }
+ },
+ mover(o, a) {
+ let that = this;
+ uni.createMapContext("myMap", this).moveToLocation({
+ longitude: o,
+ latitude: a,
+ });
+ },
+ getLocationInfo() {
+ var that = this
+ uni.getLocation({
+ type: 'wgs84',
+ success(res) {
+ // console.log(res, "当前位置");
+ that.latitude = res.latitude
+ that.longitude = res.longitude
+ console.log(that.latitude)
+ console.log(that.longitude)
+ let d = {
+ id: that.ourData.id,
+ intlat: [res.longitude, res.latitude]
+ }
+ that.timeBeginSet(d) //30秒送数据
+ that.map.moveToLocation({
+ latitude: res.latitude,
+ longitude: res.longitude
+ });
+ // that.mover(res.longitude, res.latitude); //移动
+ // that.$store.commit("setMsg",d)
+ //标记点
+ that.markers = [{
+ id: 1,
+ latitude: res.latitude,
+ longitude: res.longitude,
+ iconPath: './map/img/dinw/dinw1.png',
+ }]
+ that.circles = [{ //在地图上显示圆
+ latitude: res.latitude,
+ longitude: res.longitude,
+ fillColor: "#D9E6EF", //填充颜色
+ color: "#A7B6CB", //描边的颜色
+ radius: 10, //半径
+ strokeWidth: 2 //描边的宽度
+ }]
+ }
+ });
+ },
+ checkDomHeight(data) {
+ // 声明定时器
+ var timer = null;
+ // 检查dom是否执行完成
+ function checkDom() {
+ let useData;
+ if (data.domName == 'not') {
+ useData = this[data.name];
+ } else {
+ let dom = document[data.domName](data.name);
+ useData = dom;
+ }
+ if (useData[0]) {
+ // 执行dom加载完成后的操作
+ // 清除定时器
+ if (!timer) {
+ clearTimeout(timer);
+ }
+ if (data.fn) {
+ //回调函数
+ data.fn(useData);
+ return;
+ } else {
+ return dom;
+ }
+ } else {
+ // 自我调用
+ timer = setTimeout(checkDom, 200);
+ }
+ }
+ // 首次执行
+ checkDom();
+ },
+ checkDomHeightId(data) {
+ // 声明定时器
+ var timer = null;
+ // 检查dom是否执行完成
+ function checkDom() {
+ let useData;
+ if (data.domName == 'not') {
+ useData = this[data.name];
+ } else {
+ let dom = document[data.domName](data.name);
+ useData = dom;
+ }
+ if (useData) {
+ // 执行dom加载完成后的操作
+ // 清除定时器
+ if (!timer) {
+ clearTimeout(timer);
+ }
+ if (data.fn) {
+ //回调函数
+ data.fn(useData);
+ return;
+ } else {
+ return dom;
+ }
+ } else {
+ // 自我调用
+ timer = setTimeout(checkDom, 200);
+ }
+ }
+ // 首次执行
+ checkDom();
}
},
computed: {
@@ -64,41 +317,43 @@
mounted() {},
onReady() {
let that = this;
- window['hBackMsg'] = (val) => {
- // console.log(val)
- let d = {
- rid: val.data.id,
- serid: val.data.serid,
- type: val.type,
- that: that,
- fn: () => {
- // that.getGrabOrders(that.current); //重获取数据
- if (val.fn) {
- // console.log(111)
- val.fn("success");
- }
- }
- }
- that.$store.commit('useWebScoketApi', d);
- }
- window['setIntLat'] = (val) => {
- // console.log(fn);
- that.fn = val.fn || '';
- that.rid = val.rid || '';
- }
- window['showTip '] = (val) => {
- that.$refs.uTips.show({
- title: val,
- type: "warning",
- duration: '2300'
- })
- }
+ this.map = uni.createMapContext("myMap", this);
+ // window['hBackMsg'] = (val) => {
+ // // console.log(val)
+ // let d = {
+ // rid: val.data.id,
+ // serid: val.data.serid,
+ // type: val.type,
+ // that: that,
+ // fn: () => {
+ // // that.getGrabOrders(that.current); //重获取数据
+ // if (val.fn) {
+ // // console.log(111)
+ // val.fn("success");
+ // }
+ // }
+ // }
+ // that.$store.commit('useWebScoketApi', d);
+ // }
+ // window['setIntLat'] = (val) => {
+ // // console.log(fn);
+ // that.fn = val.fn || '';
+ // that.rid = val.rid || '';
+ // }
+ // window['showTip '] = (val) => {
+ // that.$refs.uTips.show({
+ // title: val,
+ // type: "warning",
+ // duration: '2300'
+ // })
+ // }
},
onLoad: function(options) {
var data = [],
that = this;
if (options.data == undefined) {
- data = JSON.stringify({
+ // data = JSON.stringify({
+ data = {
appenUrl: "http://192.168.0.108:83/",
butCT: "beginUp",
buttype: 0,
@@ -122,51 +377,153 @@
team: "你,他,它",
time: "2022-02-18 14:15:52",
type: "2",
+ fname: "管理者",
url: "http://223.82.109.183:2081/zhba/upload/20220218/67f0c8bf3e7b5024c64133691f265072.ico",
- })
-
+ // })
+ }
} else {
data = options.data;
}
- // console.log(data);
+ if (typeof data == "string") {
+ data = JSON.parse(data)
+ }
+ this.ourData = data;
+
+ console.log(data);
// return
// console.log(options.html)
// var a = options.html != undefined ? options.html : "xcxMapJQ/xcxmap.html";
// console.log(a)
// let a = "grabOrdersMap/xcxmap.html";
// this.urls = "http://223.82.109.183:2082/" + a + "?data=" + data;
- let name = 2; //1是本地 2是服务器
- // let name = 1;
- let b = this.$store.state.piAPI;
- if (b == '/api') {
- name = 1;
- }
- // "E:\liumy\qfqk\qfqks\qfqk-android\leafletMapOur\grabOrdersMap\xcxmap.html"
- let a = name == 1 ? "http://127.0.0.1:8848/qfqk-android/leafletMapOur/" : b.slice(0, b.indexOf('api'));
+ // let name = 1; //1是本地 2是服务器
+ // // let name = 1;
+ // let b = this.$store.state.piAPI;
+ // if (b == '/api') {
+ // name = 1;
+ // }
+ // // "E:\liumy\qfqk\qfqks\qfqk-android\leafletMapOur\grabOrdersMap\xcxmap.html"
+ // let a = name == 1 ? "http://127.0.0.1:8848/qfqk-android/leafletMapOur/" : b.slice(0, b.indexOf('api'));
+ // // this.urls = a + "grabOrdersMap/xcxmap.html?data=" + data;
+ // // a = a.slice(0, a.indexOf('api'));
// this.urls = a + "grabOrdersMap/xcxmap.html?data=" + data;
- // a = a.slice(0, a.indexOf('api'));
- this.urls = a + "grabOrdersMap/xcxmap.html?data=" + data;
- // this.urls = "http://localhost:80?data=" + data;
- // http://127.0.0.1:8848/qfqk-android/grabOrdersMap/xcxmap.html
- // this.dataList = data;
- // console.log(this.urls);
- let type = uni.getSystemInfoSync().platform;
- if (type == "android") {
- //webView传值
- let currentWebview = this.$scope.$getAppWebview();
- setTimeout(() => {
- that.wv = currentWebview.children()[0];
- console.log(that.wv)
- }, 1000)
- window.addEventListener('message', e => {
- console.log(e)
- that.webV = e.source // window的对象
- console.log(e.data.data.arg, '接收h5页面发来的消息'); // 接收h5页面发来的消息(11) ====>H5端
- }, false)
- setTimeout(() => {
- that.sendRequestData("给html", 1);
- that.sendRequestData("给html", 2);
- }, 10000)
+ // this.urls = "http://192.168.0.222:5500/xcxmap.html?data=" + data;
+ // // this.urls = "http://localhost:80?data=" + data;
+ // // http://127.0.0.1:8848/qfqk-android/grabOrdersMap/xcxmap.html
+ // // this.dataList = data;
+ // // console.log(this.urls);
+ // let type = uni.getSystemInfoSync().platform;
+ // if (type == "android") {
+ // //webView传值
+ // let currentWebview = this.$scope.$getAppWebview();
+ // setTimeout(() => {
+ // that.wv = currentWebview.children()[0];
+ // console.log(that.wv)
+ // }, 1000)
+ // window.addEventListener('message', e => {
+ // console.log(e)
+ // that.webV = e.source // window的对象
+ // console.log(e.data.data.arg, '接收h5页面发来的消息'); // 接收h5页面发来的消息(11) ====>H5端
+ // }, false)
+ // setTimeout(() => {
+ // that.sendRequestData("给html", 1);
+ // that.sendRequestData("给html", 2);
+ // }, 10000)
+ // }
+ const _this = this;
+ // console.log(document.getElementById("Umain"))
+ this.checkDomHeightId({
+ domName: "getElementById",
+ name: "Umain",
+ fn: function(dom) {
+ console.log(dom)
+ let UmainHeights = dom.clientHeight;
+ uni.getSystemInfo({
+ success: (res) => {
+ _this.mapHeight = res.screenHeight - res.statusBarHeight -
+ UmainHeights
+ _this.mapHeight = _this.mapHeight
+ }
+ })
+ }
+ })
+ this.checkDomHeight({
+ domName: "getElementsByClassName",
+ name: "content",
+ fn: function(dom) {
+ // console.log(dom[0])
+ // dom.style.height = h - UmainHeight + "px";
+ // document.getElementsByClassName("dingwei")[0].style.bottom =
+ // UmainHeight + 10 + "px";
+ // that.map.invalidateSize(true);
+
+ let h = dom[0].clientHeight;
+ //因为按钮使用v-if所以在识别高度时候，but还没渲染所以手动添加 56px 不会变
+ // console.log("应用数据")
+ let UmainHeight = document.getElementById("Umain").clientHeight;
+ // if (that.ourData.iscation == "1") {
+ // UmainHeight += 56;
+ // }
+ //计算最小单位
+ let rows = document.getElementsByClassName("once"),
+ rowsHeight = 45;
+ for (let ri = 0; ri < 3; ri++) {
+ rowsHeight += rows[ri].clientHeight;
+ }
+ //适应高度
+ that.domMove = new $moveWindow({
+ id: "Umain",
+ minHeight: rowsHeight,
+ maxHeight: UmainHeight,
+ critical: (UmainHeight - rowsHeight) / 4,
+ openAnimation: false,
+ fn: function(res) {
+ // console.log(that.map.options)
+
+ // document.getElementById("myMap").style.height = h - res.height + "px";
+ // console.log(h, res.height)
+ // uni.getSystemInfo({
+ // success: (res) => {
+ // _this.mapHeight = h - res.height
+ // _this.mapHeight = _this.mapHeight
+ // }
+ // })
+ // that.map.setView([that.map.options.center[0], +that.map.options.center[1] + 0.002], that.map
+ // .options.zoom);
+ // console.log(h - res.height)
+ if (res.state === true || res.state === false) {
+ // that.map.invalidateSize(true);
+ // _this.mapHeight = h - res.height;
+ // _this.map.moveToLocation({
+ // latitude: _this.latitude,
+ // longitude: _this.longitude
+ // });
+ document.getElementById("myMap").style.height = h - res
+ .height + "px";
+ }
+ // document.getElementsByClassName("dingwei")[0].style.bottom = res.height +
+ // 10 + "px";
+ },
+ });
+ that.domMove.init();
+ }
+ })
+
+
+ //画线
+ let line = data.line.split("(")[1].split(")")[0].split(",");
+ let ourline = [];
+ for (let k in line) {
+ let ins = line[k].split(" ");
+ ourline.push({
+ latitude: ins[1],
+ longitude: ins[0]
+ })
+ }
+ this.polylines[0].points = ourline;
+ // this.getLocationInfo(data);
+ if (data.butCT == "beginUp") {
+ this.timeBegin(1);
}
},
beforeDestroy() {
@@ -175,9 +532,110 @@
}
</script>
-<style>
+<style lang="scss">
.content {
flex: 1;
height: 100%;
}
+
+ #Umain {
+ position: absolute;
+ width: 100%;
+ height: auto;
+ left: 0;
+ bottom: 0;
+ background-color: #e8e8e8;
+ z-index: 100;
+ }
+
+ .once {
+ width: 100%;
+ min-height: 40px;
+ background-color: #fff;
+ display: flex;
+ align-items: center;
+ /* margin-bottom: 10px; */
+ border-bottom: 1px solid #e8e8e8;
+ padding: 0 10px;
+ }
+
+ .once-left {
+ width: 25%;
+ text-align: justify;
+ text-align-last: justify;
+ padding-right: 20px;
+ box-sizing: border-box;
+ }
+
+ .once-left::after {
+ content: "：";
+ position: absolute;
+ }
+
+ .once-right {
+ width: calc(75% - 20px);
+ height: auto;
+ /* border: 1px solid red; */
+ box-sizing: border-box;
+ word-break: break-all;
+ }
+
+ .once-right span {
+ display: inline-block;
+ padding: 0px 5px 1px;
+ margin: 0 5px;
+ background-color: #ECF5FF;
+ border: 0.5px solid #e4f1ff;
+ color: #429FFF;
+ border-radius: 8px;
+ }
+
+ .once-c {
+ width: 100%;
+ height: 60px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 8px 0;
+ background-color: #fff;
+ }
+
+ .once-b {
+ width: 100%;
+ height: 40px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background-color: #fff;
+ border-bottom: 1px solid #e8e8e8;
+ /* margin-bottom: 10px; */
+ }
+
+ .submits {
+ margin: 60rpx 90rpx 0;
+ 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;
+ }
+ }
</style>
--
Gitblit v1.9.3