Отображать только один маркер для нескольких вхождений одинаковых длинных значений из массива, но отображать данные об этих вхождениях в информационном окне - PullRequest
Новая
       8

Отображать только один маркер для нескольких вхождений одинаковых длинных значений из массива, но отображать данные об этих вхождениях в информационном окне

0 голосов
/ 26 февраля 2019

У меня есть массив в формате, указанном ниже: 

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-интерфейсы Google Maps на основе вышеупомянутого массива только на широтах, где скорость равна 0. Маркеры должны такжеУ меня есть информационное окно onclick, где оно должно отображать первый TimeStamp, последний TimeStamp и продолжительность между обеими временными метками.

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 с TimeStamp в качестве содержимого.

Технически код порождает несколько маркеров в одном и том же месте и отображает метку времени последнего маркера, но мне нужно добиться, чтобы он порождал только один маркер и отображал как начальную и конечную метки времени, так и длительность состояния скорости 0.

1 Ответ

0 голосов
/ 27 февраля 2019
  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);
  }
}
сортировать эти точки по времени. 
duplicatePoints.sort(function(a, b) {
  return a.timestamp - b.timestamp
});
добавить первый и последний раз;и продолжительность до 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"
});

подтверждение концепции скрипта

screenshot of resulting map

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...