<!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>