stackoom
  简体   繁体   中英

Display only one marker for multiple occurrence of same lat-longs from array but show data of these occurrences in infowindow

 原文  2019-02-26 11:22:32  6   1    javascript/ arrays/ json/ google-maps/ google-maps-api-3

Question

I have an array which is in the format given below:

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"}
];

I need to show markers using google maps api based on above array only at lat-longs where speed is 0. Markers should also have onclick infowindow where it should display first TimeStamp, last TimeStamp and duration between both timestamps.

Update1: As per previous comments, I have tried to replicate part of my code.. So these are my efforts: 

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

Above code draws a polyline as per the data, creates marker at positions where speed is '0', shows onclick infowindow with TimeStamp as content.

Technically the code is spawning multiple markers on same location and displays timestamp of last marker but what I need to achieve is, it should spawn only one marker and show both start and end Timestamps as well as duration of speed status 0.

1 answers

solution1
 0 ACCPTED  2019-02-26 23:56:47

  1. for each marker process through the list of points, finding instances of the same point.
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. sort those points by time.
duplicatePoints.sort(function(a, b) {
  return a.timestamp - b.timestamp
});
  1. add the first and last times; and the duration to the 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"
});

proof of concept fiddle

结果地图的屏幕截图 

 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>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Show InfoWindow marker contain data from database Array only retrieving first LatLng data from multiple locations and passes the same value to the infowindow's content Regex: How to return only one occurrence of a match even if there are multiple same occurrences? Display just one infowindow automatically from an array Multiple offers inside one infowindow googlemap marker Trying to create multiple markers on Google Map from database lat longs can't display data same with marker in infowindow google maps api (v3) infowindow opens at same marker! Google Maps API - How to add content to one Infowindow for one marker while reserving existing content from array? Google Maps InfoWindow Open When Only One Marker is Present
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM