Zeigen Sie Marker bei Änderung des Schiebers in Google Karte

Question

Map-Code beginnt hier. Ich arbeite jetzt lokal, Polylinie und Animation kann ich später anpassen. Slider hat zwei Variablen, also möchte ich Marker des Slider-Bereichs. Ich habe etwas mit Onchange-Funktion versucht, aber ich weiß nicht, wie ich das Downloadurl wieder abrufen kann.

var en = 'http://localhost/path/endI'; 
var bus = 'http://localhost/path/mark2'; 
var st = 'http://localhost/path/startI'; 
var map; 
var infoWindow; 
var markerArray = []; 
function load() { 
    if(map == null) { 
     map = new google.maps.Map(document.getElementById("map"), { 
      center: new google.maps.LatLng(28.43427966, 77.04600334), 
      zoom: 17, 
      mapTypeId: 'roadmap', 
      mapTypeControl: true, 
      mapTypeControlOptions: { 
       style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR, 
       position: google.maps.ControlPosition.TOP_CENTER 
      }, 
      zoomControl: true, 
      zoomControlOptions: { 
       position: google.maps.ControlPosition.LEFT_CENTER 
      }, 
      scaleControl: true, 
      streetViewControl: false, 
      fullscreenControl: true, 
      fullscreenControlOptions: { 
       position: google.maps.ControlPosition.RIGHT_TOP 
      } 

     }); 
     infoWindow = new google.maps.InfoWindow ({ maxWidth: 200 }); 

     var trafficLayer = new google.maps.TrafficLayer(); 
     trafficLayer.setMap(map); 
     var images = 'http://localhost/path/office.png'; 
     var beachMarker = new google.maps.Marker({ 
      position: {lat: 28.4136, lng:77.0420}, 
      map: map, 
      icon: images 
    }); 

    } 
     //here i call my xml file which contains lat lang sync time and all 

     downloadUrl("http://localhost/path/vehicle.php.xml", function(data) { 
     var xml = data.responseXML; 
     var markers = xml.documentElement.getElementsByTagName("marker"); 
     for(var j = 0; j < markerArray.length; j++) { 
      markerArray[j].setMap(null); 
     } 
     markerArray = [];   

     for (var i = 0; i < markers.length; i++) { 

     var point = new google.maps.LatLng(
         parseFloat(markers[i].getAttribute("lat")), 
         parseFloat(markers[i].getAttribute("lng"))); 
      var name = markers[i].getAttribute("name"); 

      var sync_time = markers[i].getAttribute("sync_time"); 
      var loc = markers[i].getAttribute("location"); 
      var vehicleNum = markers[i].getAttribute("vehicleNo"); 
      var busIcon = bus + ".png"; 
      var startIcon = st + ".png"; 
      var endIcon = en + ".png"; 
      if(i == 0){ 
       var marker = new google.maps.Marker({ 
         map: map, 
         position: point, 
         icon: startIcon 
        }); 
        map.panTo(marker.getPosition()); 
      markerArray.push(marker); 

      var html = '<h1 style="color:green; font-weight:bold; text-align:center;">Trip Started From Here</h1><br>'+'<div style="height:90px;">' + '<b>Route ' + name + '</b><br /><b>Bus Number</b>: ' + vehicleNum + '<br /><b>Location</b>: ' + loc + '<br /><b>Start Time</b>: ' + sync_time + '</div>'; 
      bindInfoWindow(marker, map, infoWindow, html); 
      } 
      if(i == markers.length-1){ 
       var marker = new google.maps.Marker({ 
         map: map, 
         position: point, 
         icon: endIcon 
        }); 
        map.panTo(marker.getPosition()); 
        markerArray.push(marker); 

      var html = '<h1 style="color:red; font-weight:bold;text-align:center;">Trip Ends Here</h1><br>'+'<div style="height:90px;">' + '<b>Route ' + name + '</b><br /><b>Bus Number</b>: ' + vehicleNum + '<br /><b>Location</b>: ' + loc + '<br /><b>End Time</b>: ' + sync_time + '</div>'; 
      bindInfoWindow(marker, map, infoWindow, html); 
      } 
      var marker = new google.maps.Marker({ 
         map: map, 
         position: point, 
         icon: busIcon 
        }); 
      map.panTo(marker.getPosition()); 
      markerArray.push(marker); 

      var html = '<div style="height:90px;">' + '<b>Route ' + name + '</b><br /><b>Bus Number</b>: ' + vehicleNum + '<br /><b>Location</b>: ' + loc + '<br /><b>Sync Time</b>: ' + sync_time + '</div>'; 
      bindInfoWindow(marker, map, infoWindow, html); 

      if(i>1){ 
       var iconsetngs = { 
    path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW 
}; 
       var latlng1 = marker.getPosition(); 
       var latlng2 = markerArray[i-1].getPosition(); 
       var flightPlanCoordinates = [ latlng1,latlng2]; 
       var flightPath = new google.maps.Polyline({ 
        path: flightPlanCoordinates, 
        strokeColor:'#dc143c', 
    strokeOpacity: 0.8, 
    strokeWeight: 1, 
    animation: google.maps.Animation.DROP, 
    map: map, 
    icons: [{ 
     icon: iconsetngs, 
     repeat:'290px', 
     offset: '100%'}] 
       }); 
     flightPath.setMap(map); 

    var flightPathShadow = new google.maps.Polyline({ 
    path: flightPlanCoordinates, 
    strokeColor: 'black', 
    strokeOpacity: 0.1, 
    strokeWeight: 8 
    }); 
     flightPathShadow.setMap(map); 
} 
} 
}); 
} 
     function bindInfoWindow(marker, map, infoWindow, html) { 
     google.maps.event.addListener(marker, 'click', function() { 
     infoWindow.setContent(html); 
     infoWindow.open(map, marker); 
    }); 
} 

function downloadUrl(url, callback) { 
    var request = window.ActiveXObject ? 
       new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest; 

    request.onreadystatechange = function() { 
     if (request.readyState == 4) { 
      request.onreadystatechange = doNothing; 
      callback(request, request.status); 
     } 
    }; 

    request.open('GET', url, true); 
    request.timeout = 10000; 
    request.send(null); 
} 

function doNothing() {} 

<script src='https://code.jquery.com/jquery-1.12.4.js'></script> 
<script src='https://code.jquery.com/ui/1.12.1/jquery-ui.js'></script> 

    slider have two variable , so i want marker of the slider range 
    i was trying somthing with onchnage function but i dont know how i can again fetch the downloadurl 

$("#slider-range").slider({ 
range: true, 
min: 0, 
max: 1440, 
step: 15, 
values: [0, 1440], 
slide: function (e, ui) { 
var hours1 = Math.floor(ui.values[0]/60); 
    var minutes1 = ui.values[0] - (hours1 * 60); 
    if (hours1.length == 1) hours1 = '0' + hours1; 
    if (minutes1.length == 1) minutes1 = '0' + minutes1; 
    if (minutes1 == 0) minutes1 = '00'; 
    if (hours1 >= 12) { 
     if (hours1 == 12) { 
      hours1 = hours1; 
      minutes1 = minutes1 + " PM"; 
     } else { 
      hours1 = hours1 - 12; 
      minutes1 = minutes1 + " PM"; 
     } 
    } else { 
     hours1 = hours1; 
     minutes1 = minutes1 + " AM"; 
    } 
    if (hours1 == 0) { 
     hours1 = 12; 
     minutes1 = minutes1; 
    } 
    } 
    $('.slider-time').html(hours1 + ':' + minutes1); 

    var hours2 = Math.floor(ui.values[1]/60); 
    var minutes2 = ui.values[1] - (hours2 * 60); 

    if (hours2.length == 1) hours2 = '0' + hours2; 
    if (minutes2.length == 1) minutes2 = '0' + minutes2; 
    if (minutes2 == 0) minutes2 = '00'; 
    if (hours2 >= 12) { 
     if (hours2 == 12) { 
      hours2 = hours2; 
      minutes2 = minutes2 + " PM"; 
     } else if (hours2 == 24) { 
      hours2 = 11; 
      minutes2 = "59 PM"; 
     } else { 
      hours2 = hours2 - 12; 
      minutes2 = minutes2 + " PM"; 
     } 
    } else { 
     hours2 = hours2; 
     minutes2 = minutes2 + " AM"; 
    } 

     $('.slider-time2').html(hours2 + ':' + minutes2); 
    } 
}); 

Alles, was ich will, wie ich meinen Schieber bewegen wird es Wert von Markern und zeigt die Markierungen meiner XML-Datei Synchronisierungszeit enthält. Dies ist meine XML-Datei. Es ist eigentlich nicht so, es ist formatiert, aber das sind die Attribute. Die Slider-Funktion ruft die Zeit für die Synchronisierung der XML-Datei ab. Mit dieser Synchronisierungszeit und der Schiebereglerzeit werden korrekte Markierungen oder der Pfad auf der Google-Karte angezeigt.

[lat="28.41381473" lng="77.04298833" name="01" location="" sync_time="2016-10-12 15:58:05" vehicleNo="Abhishek"] 

Bitte helfen Sie mir.

Answer 1

versuchen, diese

Sie date.js nee, bei https://code.google.com/archive/p/datejs/downloads

ich die Zeit in Sekunden Unix So übersetzen, macht dies für schöne Zahlen. Ich stelle nur die Min und Max des Reglers auf die Min und Max Unix Sekunden.

Swap Google api Schlüssel

<!DOCTYPE html> 
<html> 
    <head> 
    <title>show markers on change of slider in google map</title> 
    <meta name="viewport" content="initial-scale=1.0"> 
    <meta charset="utf-8"> 
    </head> 
    <body> 
    <script> 
     // @see http://stackoverflow.com/questions/40172046/show-markers-on-change-of-slider-in-google-map 
    </script> 
    <style> 
     html, body { 
     height: 100%; 
     margin: 0; 
     padding: 0; 
     } 
     #map { 
     height: 80%; 
     } 
     #slider { 
     width: 50%; 
     margin: 10px; 
     } 
    </style> 
    <div id="slider"></div> 
    <div id="map"></div> 
    <script src="date.js" async defer></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
    <script src="https://maps.google.com/maps/api/js?callback=initMap&key=AIzaSyAxYGlluHcsgR2X9SPX0nATQYRDeJE4u9U&libraries=geometry" async defer></script> 
    <script> 
     var map; 
     var marker; 
     var startMarker; 
     var endMarker; 
     var pointer = 0; // will be the pointer of the slider 
     var pointerIndex = 0; // will be the index of the selected location 
     var sliderIndex = -1; 
     var my_data = []; 

     // date.js, @see http://stackoverflow.com/questions/1791895/converting-date-and-time-to-unix-timestamp 
     // download date.js at https://code.google.com/archive/p/datejs/downloads 
     function getTime(timestring) { 
     //timestring = "2016-10-27 14:18:00"; 
     var unixtime = Date.parse(timestring).getTime()/1000; 
     return(unixtime); 
     } 
     function loadData(onReady) { 
     $.ajax({ 
      url: 'data.json', 
      dataType: 'json', 
      success: function(data) { 
      my_data = data; 
      if(typeof onReady == 'function') { 
       onReady(data); 
      } 
      } 
     }); 
     } 
     function generateMarkers() { 
     //we only show 1 marker 
     var position = {lat: Number(my_data[0].lat), lng: Number(my_data[0].lng)}; 
     startMarker = new google.maps.Marker({ 
      position: position, 
      title: my_data[0].name, 
      icon: { 
      url: 'http://download.seaicons.com/icons/custom-icon-design/flatastic-9/32/Start-icon.png', 
      size: new google.maps.Size(32, 32) 
      }, 
      map: map 
     }); 
     var endPosition = {lat: Number(my_data[my_data.length - 1].lat), lng: Number(my_data[my_data.length - 1].lng)}; 
     endMarker = new google.maps.Marker({ 
      position: endPosition, 
      title: my_data[my_data.length - 1].name, 
      icon: { 
      url: 'http://megaicons.net/static/img/icons_title/320/823/title/flag-finish-icon.png', 
      size: new google.maps.Size(32, 32) 
      }, 
      map: map 
     }); 
     // let's do this marker last, so it's on top of z-index 
     marker = new google.maps.Marker({ 
      position: position, 
      title: my_data[0].name, 
      map: map 
     }); 
     // click event, click on marker opens the infoWindow 
     google.maps.event.addListener(marker, 'click', function(e) { 
      var i = pointerIndex; 
      // infowindow 
      var position = {lat: Number(my_data[i].lat), lng: Number(my_data[i].lng)}; 
      var infowindow = new google.maps.InfoWindow({ 
      content: my_data[i].name +' <br/> '+ my_data[i].sync_time, // add what ever 
      map: map, 
      position: position 
      }); 
     }); 
     } 

     function initMap() { 
     map = new google.maps.Map(document.getElementById('map'), { 
      center: {lat: 28.41381473, lng: 77.04298833}, 
      zoom: 14 
     }); 
     loadData(function() { 
      // when the data is loaded, this callback will be called 
      // set the slider 
      var items = my_data.length; 
      // get times 
      var times = []; // store the unix seconds in an array 
      for(var i in my_data) { 
       if(my_data[i].sync_time) { 
       var time = getTime(my_data[i].sync_time); 
       times.push(time); 
       } 
      } 
      $('#slider').slider({ 
       min: times.min(), 
       max: times.max(), 
       slide: function(event, ui) { 
       pointer = ui.value; 
       for(var i in my_data) { 
        if(my_data[i].sync_time) { 
        var time = getTime(my_data[i].sync_time); 
        if(pointer <= time) { 
         pointerIndex = i; 
         showMarker(pointerIndex); 
         break; 
        } 
        } 
       } 
       } 
      }); 
      // generate Markers 
      generateMarkers(); 
     }); 
     } 

     // shows 1 marker, at the wanted position 
     function showMarker(index) { 
     var position = {lat: Number(my_data[index].lat), lng: Number(my_data[index].lng)}; 
     marker.setPosition(position); 
     } 

     //http://stackoverflow.com/questions/1669190/javascript-min-max-array-values 
     Array.prototype.max = function() { 
     return Math.max.apply(null, this); 
     }; 
     Array.prototype.min = function() { 
     return Math.min.apply(null, this); 
     }; 
    </script> 
    </body> 
</html> 

date.json

[ 
    {"lat": 28.418871185756046, "lng": 77.03988238780516, "name":"00", "location": "", "sync_time":"2016-10-12 15:58:05", "vehicleNo": "Abhishek"}, 
    {"lat": 28.414201027385680, "lng": 77.04124510288238, "name":"01", "location": "", "sync_time":"2016-10-12 15:59:05", "vehicleNo": "Abhishek"}, 
    {"lat": 28.410076539302824, "lng": 77.04258605449217, "name":"02", "location": "", "sync_time":"2016-10-12 16:00:05", "vehicleNo": "Abhishek"}, 
    {"lat": 28.407142409664587, "lng": 77.04351425170898, "name":"03", "location": "", "sync_time":"2016-10-12 16:02:05", "vehicleNo": "Abhishek"}, 
    {"lat": 28.404980594548426, "lng": 77.04391643016356, "name":"04", "location": "", "sync_time":"2016-10-12 16:04:05", "vehicleNo": "Abhishek"} 
]