Skip to content

L
laravelzh
Switch branch/tag
Find file
Normal viewHistoryPermalink
npm.html 6 KB
Newer Older
冯超鹏's avatar
登入模块
1b901a46
 
冯超鹏 committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>地图模式</title>
    <link rel="stylesheet" type="text/css" href="npmcss/zzsc.css">
    <link rel="stylesheet" type="text/css" href="npmcss/style.css">
    <style>
      html,
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
      height: 100%;
    }
    #mapContainer {
      position: relative;
      height: 100%;
      width: 100%;
    }

  </style>
  </head>
  <script src="npmcss/jquery.js"></script>
  <script charset="utf-8" src="https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"></script>
  <body onload="init(1)">
    <div id='mapContainer'>
      <div class="container" style="z-index: 9999999;position:fixed;left: 1233px;top: -31px;">
        <!-- <div class="switch-box is-info">
          <input id="info" class="switch-box-input" type="checkbox" checked />
          <label for="info" class="switch-box-slider" onclick="init(2)"></label>
          <label for="info" class="switch-box-label">切换设备</label>
        </div> -->
      </div>
    </div>
    <script>
      var map;
      function init(id) {
        var type = getUrlParams('type');
        if(type == '' || type == null){
          alert('违规操作');
          window.opener = null;
          window.open('', '_self');
          window.close();
          return;
        }
        if(type != 'permit'){
          alert('type值不对重新打开');
          window.opener = null;
          window.open('', '_self');
          window.close();
          return;
        }
        if(id == 1){ //用户设备
          $.ajax({
            type: "GET",
            url: "api/user/userLocation",
            data: {},
            success: function(data) {
              var data = JSON.parse(data);
              nmp(data.data,1);
            }
          });
        }else{
          $.ajax({
            type: "GET",
            url: "api/devices/deviceLocation",
            data: {},
            success: function(data) {
              var data = JSON.parse(data);
              nmp(data.data,2);
            }
          });
        }
      }

      function getUrlParams(name) {
        var url = window.location.search;
        if (url.indexOf('?') == 1) {
          return false;
        }
        url = url.substr(1);
        url = url.split('&');
        var name = name || '';
        var nameres;
        // 获取全部参数及其值
        for (var i = 0; i < url.length; i++) {
          var info = url[i].split('=');
          var obj = {};
          obj[info[0]] = info[1];
          url[i] = obj;
        }
        // 如果传入一个参数名称，就匹配其值
        if (name) {
          for (var i = 0; i < url.length; i++) {
            for (const key in url[i]) {
              if (key == name) {
                nameres = url[i][key];
              }
            }
          }
        } else {
          nameres = url;
        }
        // 返回结果
        return uncompileStr(nameres);
      }

      function uncompileStr(code) {
        code = unescape(code);
        var c = String.fromCharCode(code.charCodeAt(0) - code.length);
        for (var i = 1; i < code.length; i++) {
          c += String.fromCharCode(code.charCodeAt(i) - c.charCodeAt(i - 1));
        }
        return c;
      }

      function nmp(data,type) {
        var LatLng = [];
        if(type == 2){
          console.log(LatLng);
          data.forEach((item, index, array) => {
            if (item.devicecoord != null && item.mapcenter != '') {
              console.log(item);
              let x = item.devicecoord.split(',')[0];
              let y = item.devicecoord.split(',')[1];
              if (x > 0 && y > 0) {
                let position = new TMap.LatLng(x, y);
                let tmpP = {
                  position: position
                };
                LatLng.push(tmpP);
              }
            }
          });
        }else{
          data.forEach((item, index, array) => {
            if (item.mapcenter != null && item.mapcenter != '') {
              let x = item.mapcenter.split(',')[0];
              let y = item.mapcenter.split(',')[1];
              if (x > 0 && y > 0) {
                let position = new TMap.LatLng(x, y);
                let tmpP = {
                  position: position,
                };
                LatLng.push(tmpP);
              }
            }
          });
        }
        var drawContainer = document.getElementById('mapContainer');
        var center = new TMap.LatLng(38.230596, 114.216328); //设置中心点坐标
        map = new TMap.Map(drawContainer, {
          zoom: 12,
          pitch: 40,
          center: center,
          draggable: true,
          scrollable: true,
          mapStyleId: "style1"
        });
        // 创建点聚合实例
        var markerCluster = new TMap.MarkerCluster({
          id: 'cluster',
          map: map,
          enableDefaultStyle: true, // 启用默认样式
          minimumClusterSize: 2, // 形成聚合簇的最小个数
          geometries: [{
        "id": "1",   //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
        "styleId": 'myStyle',  //指定样式id
        "position": new TMap.LatLng(39.954104, 116.357503),  //点标记坐标位置
        "properties": {//自定义属性
            "title": "marker1"
        }
    }, {//第二个点标记
        "id": "2",
        "styleId": 'marker',
        "position": new TMap.LatLng(39.994104, 116.287503),
        "properties": {
            "title": "marker2"
        }
    }
    ],
          zoomOnClick: true, // 点击簇时放大至簇内点分离
          gridSize: 60, // 聚合算法的可聚合距离
          averageCenter: false, // 每个聚和簇的中心是否应该是聚类中所有标记的平均值
          maxZoom: true // 采用聚合策略的最大缩放级别
        });
      }
    </script>
  </body>
</html>