+地图更新成uniapp

liuyg

2022-02-22 53f5367d635ecfde9ceb36fe3bcafa86c32275a8

 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}}&nbsp;-&nbsp;{{ourData.city}}&nbsp;-&nbsp;{{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}}&nbsp;/&nbsp;{{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>