Обновить открытые карты Google Infowindow

Question

Я играю в раунд с получением информации json с веб-сайта для отслеживания автобусов и с помощью Google Maps, явно не так красиво. В настоящее время я не могу понять, как обновить infowindow, пока он открыт. Я нашел несколько примеров, но ничего не работает для того, что я хочу. Мне как-то удалось получить маркеры для обновления и перемещения для каждого «обновления», но информационные окна не делают то, что я хочу. Я хочу, чтобы иметь возможность щелкнуть маркер и включить его в список, скажем, скорость автомобиля в инфоиндусте. Пока окно все еще открыто, а json обновляет/загружает, маркер будет перемещаться, и я хочу, чтобы содержимое окна также обновлялось с новой скоростью. У этого есть открытая инфузия, обновляющая его содержимое, не закрывая его.

Бонус: цель состоит в том, чтобы включить и выключить функцию runbuses() с помощью флажка. Так что, когда он не установлен, он перестает загружать новый json. Я также не знаю, как это сделать. Ха-ха

В любом случае это было весело, пытаясь узнать немного java. Спасибо!

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

Если вы хотите изменить содержание открытой InfoWindow, дают HTML-элемент в нем, что вы что изменить идентификатор и использовать HTML DOM манипуляции, чтобы изменить его.

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

Тогда, если InfoWindow открыто, это должно работать:

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

фрагмент кода:

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>