时间戳

首页 > 解决方案 > 仅显示一个标记以表示数组中多次出现相同的经纬度，但在 infowindow 中显示这些出现的数据

javascript - 仅显示一个标记以表示数组中多次出现相同的经纬度，但在 infowindow 中显示这些出现的数据

问题描述

我有一个数组，格式如下：

jarray = [
 {"Latitude":"17.3750688888889","Longitude":"78.4824888888889","Speed":"13","TrackTime":"08-Feb-19 11:11:10 AM"},
 {"Latitude":"17.3750688888889","Longitude":"78.4824888888889","Speed":"13","TrackTime":"08-Feb-19 11:12:33 AM"},
 {"Latitude":"17.3746811111111","Longitude":"78.4825511111111","Speed":"0","TrackTime":"08-Feb-19 11:12:33 AM"},
 {"Latitude":"17.3746811111111","Longitude":"78.4825511111111","Speed":"0","TrackTime":"08-Feb-19 11:12:35 AM"},
 {"Latitude":"17.3746811111111","Longitude":"78.4825511111111","Speed":"0","TrackTime":"08-Feb-19 11:18:00 AM"},
 {"Latitude":"17.3746811111111","Longitude":"78.4825511111111","Speed":"0","TrackTime":"08-Feb-19 11:23:30 AM"},
 {"Latitude":"17.3747333333333","Longitude":"78.4824977777778","Speed":"8","TrackTime":"08-Feb-19 11:27:29 AM"},
 {"Latitude":"17.3747866666667","Longitude":"78.48232","Speed":"16","TrackTime":"08-Feb-19 11:27:29 AM"},
 {"Latitude":"17.3747366666667","Longitude":"78.4821244444444","Speed":"11","TrackTime":"08-Feb-19 11:27:29 AM"},
 {"Latitude":"17.3746","Longitude":"78.4819022222222","Speed":"7","TrackTime":"08-Feb-19 11:27:29 AM"},
 {"Latitude":"17.3746433333333","Longitude":"78.4818044444444","Speed":"17","TrackTime":"08-Feb-19 11:27:29 AM"},
 {"Latitude":"17.3748111111111","Longitude":"78.4816088888889","Speed":"10","TrackTime":"08-Feb-19 11:27:29 AM"},
 {"Latitude":"17.3748111111111","Longitude":"78.4816088888889","Speed":"10","TrackTime":"08-Feb-19 11:27:30 AM"},
 {"Latitude":"17.3747388888889","Longitude":"78.4816177777778","Speed":"10","TrackTime":"08-Feb-19 11:27:37 AM"},
 {"Latitude":"17.3743955555556","Longitude":"78.482","Speed":"8","TrackTime":"08-Feb-19 11:27:57 AM"},
 {"Latitude":"17.3743111111111","Longitude":"78.4821244444444","Speed":"0","TrackTime":"08-Feb-19 11:28:40 AM"}
];

我需要使用基于上述数组的谷歌地图 api 显示标记，仅在速度为 0 的经纬度上。标记还应该有 onclick 信息窗口，它应该显示第一个时间戳、最后一个时间戳和两个时间戳之间的持续时间。

Update1：​​根据之前的评论，我试图复制我的部分代码。所以这些是我的努力：

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  <meta charset="utf-8">
  <title>Halting Points</title>
  <style>
    /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
    
    #map {
      height: 100%;
    }
    /* Optional: Makes the sample page fill the window. */
    
    html,
    body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
</head>

<body>
  <div id="map"></div>
  <script>
    function initMap() {
      var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 5,
        center: {
          lat: 17.3850,
          lng: 78.4867
        },
        mapTypeId: 'terrain'
      });
      var bounds = new google.maps.LatLngBounds();
      var jarray = [
      {"Latitude":"17.3750688888889","Longitude":"78.4824888888889","Speed":"13","TrackTime":"08-Feb-19 11:11:10 AM"},
      {"Latitude":"17.3750688888889","Longitude":"78.4824888888889","Speed":"13","TrackTime":"08-Feb-19 11:12:33 AM"},
      {"Latitude":"17.3746811111111","Longitude":"78.4825511111111","Speed":"0","TrackTime":"08-Feb-19 11:12:33 AM"},
      {"Latitude":"17.3746811111111","Longitude":"78.4825511111111","Speed":"0","TrackTime":"08-Feb-19 11:12:35 AM"},
      {"Latitude":"17.3746811111111","Longitude":"78.4825511111111","Speed":"0","TrackTime":"08-Feb-19 11:18:00 AM"},
      {"Latitude":"17.3746811111111","Longitude":"78.4825511111111","Speed":"0","TrackTime":"08-Feb-19 11:23:30 AM"},
      {"Latitude":"17.3747333333333","Longitude":"78.4824977777778","Speed":"8","TrackTime":"08-Feb-19 11:27:29 AM"},
      {"Latitude":"17.3747866666667","Longitude":"78.48232","Speed":"16","TrackTime":"08-Feb-19 11:27:29 AM"},
      {"Latitude":"17.3747366666667","Longitude":"78.4821244444444","Speed":"11","TrackTime":"08-Feb-19 11:27:29 AM"},
      {"Latitude":"17.3746","Longitude":"78.4819022222222","Speed":"7","TrackTime":"08-Feb-19 11:27:29 AM"},
      {"Latitude":"17.3746433333333","Longitude":"78.4818044444444","Speed":"17","TrackTime":"08-Feb-19 11:27:29 AM"},
      {"Latitude":"17.3748111111111","Longitude":"78.4816088888889","Speed":"10","TrackTime":"08-Feb-19 11:27:29 AM"},
      {"Latitude":"17.3748111111111","Longitude":"78.4816088888889","Speed":"10","TrackTime":"08-Feb-19 11:27:30 AM"},
      {"Latitude":"17.3747388888889","Longitude":"78.4816177777778","Speed":"10","TrackTime":"08-Feb-19 11:27:37 AM"},
      {"Latitude":"17.3743955555556","Longitude":"78.482","Speed":"8","TrackTime":"08-Feb-19 11:27:57 AM"},
      {"Latitude":"17.3743111111111","Longitude":"78.4821244444444","Speed":"0","TrackTime":"08-Feb-19 11:28:40 AM"}
      ];
      var pointstat = [];
      var tracktimearray;
      var flightPlanCoordinates = [];
      for (i = 0; i <
        jarray.length; i++) {
        flightPlanCoordinates[i] = new google.maps.LatLng(parseFloat(jarray[i].Latitude), parseFloat(jarray[i].Longitude));
        if (jarray[i].Speed == "0") {
          var tracktime = (jarray[i].TrackTime);
          var fli = new google.maps.LatLng(parseFloat(jarray[i].Latitude), parseFloat(jarray[i].Longitude));
          addhaltmarker(fli, tracktime);
        }
      }

      function addhaltmarker(fli, tracktime) {
        var infowindow = new google.maps.InfoWindow({
          content: tracktime
        });
        var marker = new google.maps.Marker({
          position: fli,
          map: map
        });
        marker.addListener('click', function() {
          infowindow.open(map, marker);
        });
      }

      for (i = 0; i <
        flightPlanCoordinates.length; i++) {
        bounds.extend(flightPlanCoordinates[i]);
      }
      var flightPath = new google.maps.Polyline({
        path: flightPlanCoordinates,
        geodesic: true,
        strokeColor: '#FF0000',
        strokeOpacity: 1.0,
        strokeWeight: 2
      });
      flightPath.setMap(map);

      map.fitBounds(bounds);
    }
  </script>
  <script async defer src="https://maps.googleapis.com/maps/api/js?key=KEY&callback=initMap"></script>
</body>

</html>

上面的代码根据数据绘制一条折线，在速度为“0”的位置创建标记，显示以时间戳为内容的 onclick 信息窗口。

从技术上讲，代码在同一位置生成多个标记并显示最后一个标记的时间戳，但我需要实现的是，它应该只生成一个标记并显示开始和结束时间戳以及速度状态 0 的持续时间。

标签： javascriptarraysjsongoogle-mapsgoogle-maps-api-3

解决方案

  1. 对于每个标记过程，通过点列表，找到同一点的实例。
for (var i = 0; i < jarray.length; i++) {
  if (!jarray[i].latLng)
    jarray[i].latLng = new google.maps.LatLng(jarray[i].Latitude, jarray[i].Longitude);
  if (google.maps.geometry.spherical.computeDistanceBetween(fli, jarray[i].latLng) < 1) {
    var obj = jarray[i];
    obj.timestamp = Date.parse(obj.TrackTime);
    duplicatePoints.push(obj);
  }
}
  1. 按时间对这些点进行排序。
duplicatePoints.sort(function(a, b) {
  return a.timestamp - b.timestamp
});
  1. 添加第一次和最后一次；和持续时间InfoWindow
var infowindow = new google.maps.InfoWindow({
  content: tracktime + "<br>first time:" + duplicatePoints[0].TrackTime +
    "<br>last time:" + duplicatePoints[duplicatePoints.length - 1].TrackTime +
    "<br>duration:" + ((duplicatePoints[duplicatePoints.length - 1].timestamp - duplicatePoints[0].timestamp) / 60 / 1000).toFixed(2) + " minutes"
});

概念证明小提琴

结果地图的屏幕截图

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 5,
    center: {
      lat: 17.3850,
      lng: 78.4867
    },
    mapTypeId: 'terrain'
  });
  var bounds = new google.maps.LatLngBounds();
  var pointstat = [];
  var tracktimearray;
  var flightPlanCoordinates = [];
  for (i = 0; i <
    jarray.length; i++) {
    flightPlanCoordinates[i] = new google.maps.LatLng(parseFloat(jarray[i].Latitude), parseFloat(jarray[i].Longitude));
    if (jarray[i].Speed == "0") {
      var tracktime = (jarray[i].TrackTime);
      var fli = new google.maps.LatLng(parseFloat(jarray[i].Latitude), parseFloat(jarray[i].Longitude));
      addhaltmarker(fli, tracktime);
    }
  }

  function addhaltmarker(fli, tracktime) {
    var duplicatePoints = [];
    for (var i = 0; i < jarray.length; i++) {
      if (!jarray[i].latLng)
        jarray[i].latLng = new google.maps.LatLng(jarray[i].Latitude, jarray[i].Longitude);
      if (google.maps.geometry.spherical.computeDistanceBetween(fli, jarray[i].latLng) < 1) {
        var obj = jarray[i];
        obj.timestamp = Date.parse(obj.TrackTime);
        duplicatePoints.push(obj);
      }
    }
    duplicatePoints.sort(function(a, b) {
      return a.timestamp - b.timestamp
    });

    var infowindow = new google.maps.InfoWindow({
      content: tracktime + "<br>first time:" + duplicatePoints[0].TrackTime +
        "<br>last time:" + duplicatePoints[duplicatePoints.length - 1].TrackTime +
        "<br>duration:" + ((duplicatePoints[duplicatePoints.length - 1].timestamp - duplicatePoints[0].timestamp) / 60 / 1000).toFixed(2) + " minutes"
    });
    var marker = new google.maps.Marker({
      position: fli,
      map: map
    });
    marker.addListener('click', function() {
      infowindow.open(map, marker);
    });
  }

  for (i = 0; i <
    flightPlanCoordinates.length; i++) {
    bounds.extend(flightPlanCoordinates[i]);
  }
  var flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    geodesic: true,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 2
  });
  flightPath.setMap(map);

  map.fitBounds(bounds);
}
var jarray = [{
    "Latitude": "17.3750688888889",
    "Longitude": "78.4824888888889",
    "Speed": "13",
    "TrackTime": "08-Feb-19 11:11:10 AM"
  },
  {
    "Latitude": "17.3750688888889",
    "Longitude": "78.4824888888889",
    "Speed": "13",
    "TrackTime": "08-Feb-19 11:12:33 AM"
  },
  {
    "Latitude": "17.3746811111111",
    "Longitude": "78.4825511111111",
    "Speed": "0",
    "TrackTime": "08-Feb-19 11:12:33 AM"
  },
  {
    "Latitude": "17.3746811111111",
    "Longitude": "78.4825511111111",
    "Speed": "0",
    "TrackTime": "08-Feb-19 11:12:35 AM"
  },
  {
    "Latitude": "17.3746811111111",
    "Longitude": "78.4825511111111",
    "Speed": "0",
    "TrackTime": "08-Feb-19 11:18:00 AM"
  },
  {
    "Latitude": "17.3746811111111",
    "Longitude": "78.4825511111111",
    "Speed": "0",
    "TrackTime": "08-Feb-19 11:23:30 AM"
  },
  {
    "Latitude": "17.3747333333333",
    "Longitude": "78.4824977777778",
    "Speed": "8",
    "TrackTime": "08-Feb-19 11:27:29 AM"
  },
  {
    "Latitude": "17.3747866666667",
    "Longitude": "78.48232",
    "Speed": "16",
    "TrackTime": "08-Feb-19 11:27:29 AM"
  },
  {
    "Latitude": "17.3747366666667",
    "Longitude": "78.4821244444444",
    "Speed": "11",
    "TrackTime": "08-Feb-19 11:27:29 AM"
  },
  {
    "Latitude": "17.3746",
    "Longitude": "78.4819022222222",
    "Speed": "7",
    "TrackTime": "08-Feb-19 11:27:29 AM"
  },
  {
    "Latitude": "17.3746433333333",
    "Longitude": "78.4818044444444",
    "Speed": "17",
    "TrackTime": "08-Feb-19 11:27:29 AM"
  },
  {
    "Latitude": "17.3748111111111",
    "Longitude": "78.4816088888889",
    "Speed": "10",
    "TrackTime": "08-Feb-19 11:27:29 AM"
  },
  {
    "Latitude": "17.3748111111111",
    "Longitude": "78.4816088888889",
    "Speed": "10",
    "TrackTime": "08-Feb-19 11:27:30 AM"
  },
  {
    "Latitude": "17.3747388888889",
    "Longitude": "78.4816177777778",
    "Speed": "10",
    "TrackTime": "08-Feb-19 11:27:37 AM"
  },
  {
    "Latitude": "17.3743955555556",
    "Longitude": "78.482",
    "Speed": "8",
    "TrackTime": "08-Feb-19 11:27:57 AM"
  },
  {
    "Latitude": "17.3743111111111",
    "Longitude": "78.4821244444444",
    "Speed": "0",
    "TrackTime": "08-Feb-19 11:28:40 AM"
  }
];
html,
body {
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
}

#map {
  width: 100%;
  height: 90%;
}
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=geometry&callback=initMap"></script>

推荐阅读