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