Update geöffnet google maps Infowindow

Question

Ich spiele rund um JSon Informationen von einer Bus-Tracker-Website bekommen und meine eigene mit Google Maps rollen, offensichtlich nicht so schön. Derzeit kann ich nicht herausfinden, wie man ein Infofenster aktualisiert, während es geöffnet ist. Ich habe einige Beispiele gefunden, aber nichts scheint für das zu funktionieren, was ich will. Irgendwie gelang es mir, die Markierungen zu aktualisieren und für jedes "Update" zu verschieben, aber die Info-Fenster machen nicht, was ich will. Ich möchte in der Lage sein, auf einen Marker zu klicken und eine Liste zu haben, sagen Sie die Fahrzeuggeschwindigkeit im Infofenster. Während das Fenster noch geöffnet ist und der Json aktualisiert/heruntergeladen wird, bewegt sich der Marker und ich möchte, dass der Inhalt des Fensters ebenfalls mit der neuen Geschwindigkeit aktualisiert wird. Das ist ein offenes Infofenster, das seinen Inhalt aktualisiert, ohne es zu schließen.

Bonus: Ziel ist es, dass die Funktion runbuses() mit einem Kontrollkästchen ein- und ausgeschaltet wird. Wenn es nicht markiert ist, hört es auf, neues json herunterzuladen. Ich habe auch keine Ahnung, wie ich das machen soll. Haha

Wie auch immer, das hat Spaß gemacht beim Versuch, ein wenig Java zu lernen. Danke!

function runbuses() { 
 
    setInterval(function() { 
 

 
    loadbus(map) 
 

 
    }, 5000); 
 
} 
 

 

 
function loadbus(map) { 
 

 
    //howardshuttle.com 
 

 
    $.ajax({ 
 
    url: "http://www.howardshuttle.com/Services/JSONPRelay.svc/GetMapVehiclePoints", 
 
    data: 'ApiKey=8882812681', 
 
    dataType: 'jsonp', 
 
    jsonp: 'method', 
 
    async: false, 
 
    cache: false, 
 
    success: function(obj) { 
 

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

 
     var image = { 
 
      url: setumicon(obj[i]['Heading']), 
 
      anchor: new google.maps.Point(20, 20), 
 
      scaledSize: new google.maps.Size(40, 40) 
 
     } 
 

 
     console.log(obj[i].Name); 
 

 
     //Do we have this marker already? 
 
     if (umbuses.hasOwnProperty(obj[i].Name)) { 
 
      umbuses[obj[i].Name].setPosition(new google.maps.LatLng(obj[i].Latitude, obj[i].Longitude)); 
 
      umbuses[obj[i].Name].setIcon(image); 
 

 
\t // How do i update the info window that is open? 
 

 

 
      console.log(Math.round(obj[i]['GroundSpeed'])); 
 
      console.log('has prop'); 
 

 
     } else { 
 
      var hover = obj[i].Name; 
 
      console.log('new'); 
 
      var image = { 
 
      url: setumicon(obj[i].Heading), 
 
      anchor: new google.maps.Point(20, 20), 
 
      scaledSize: new google.maps.Size(40, 40) 
 
      } 
 

 
      marker = new google.maps.Marker({ 
 
      position: new google.maps.LatLng(obj[i].Latitude, obj[i].Longitude), 
 
      map: map, 
 
      icon: image, 
 
      title: String(hover) 
 
      }); 
 

 

 
      google.maps.event.addListener(marker, 'click', (function(marker, i) { 
 
      return function() { 
 

 
       if (activeInfoWindow != null) activeInfoWindow.close(); 
 

 
       uminfo.setContent("<p>" + obj[i]['Name'] + "<br />" + umFindroute(obj[i]['RouteID']) + "<br />" + 
 
       "Speed: " + Math.round(obj[i]['GroundSpeed']) + " mph" + "</p>"); 
 

 

 
       uminfo.open(map, marker); 
 
       activeInfoWindow = uminfo; 
 

 
      } 
 
      })(marker, i)); 
 

 

 
      umbuses[obj[i].Name] = marker; 
 
      console.log(umbuses); 
 

 
     } 
 

 
     } 
 

 

 
    }, 
 
    error: function(XMLHttpRequest, textStatus, errorThrown) { 
 
     alert("some error"); 
 
    } 
 

 
    }); 
 

 
}

Answer 1

Wenn Sie den Inhalt eines offenen Infofenster ändern, in dem HTML-Element geben, das Ihnen, was eine ID zu ändern und HTML-DOM-Manipulation verwenden, es zu ändern.

uminfo.setContent("<div id='infowin'><p>" + obj[i]['Name'] + "<br />" + umFindroute(obj[i]['RouteID']) + "<br />" + 
      "Speed: " + Math.round(obj[i]['GroundSpeed']) + " mph" + "</p></div>"); 

Dann, wenn das Infofenster geöffnet ist, sollte diese Arbeit:

document.getElementById('infowin').innerHTML = "<p>" + obj[i]['Name'] + "<br />" + umFindroute(obj[i]['RouteID']) + "<br />" + 
      "Speed: " + Math.round(obj[i]['GroundSpeed']) + " mph" + "</p>"; 

Code-Schnipsel:

function initialize() { 
 
    var map = new google.maps.Map(
 
    document.getElementById("map_canvas"), { 
 
     center: new google.maps.LatLng(37.4419, -122.1419), 
 
     zoom: 13, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 
    var marker = new google.maps.Marker({ 
 
    map: map, 
 
    position: map.getCenter() 
 
    }); 
 
    var infowindow = new google.maps.InfoWindow({ 
 
    content: "<div id='infowin'>original content</div>" 
 
    }); 
 
    google.maps.event.addListener(marker, 'click', function(evt) { 
 
    infowindow.open(map, marker); 
 
    }) 
 
    google.maps.event.trigger(marker, 'click'); 
 
    setInterval(function() { 
 
    marker.setPosition(google.maps.geometry.spherical.computeOffset(marker.getPosition(), 100, 90)); 
 
    document.getElementById('infowin').innerHTML = "<b>Time</b>:" + Date() + "<br>" + marker.getPosition().toUrlValue(6); 
 
    }, 5000); 
 

 
} 
 
google.maps.event.addDomListener(window, "load", initialize);

html, 
 
body, 
 
#map_canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script> 
 
<div id="map_canvas"></div>