更新打開的Google地圖Infowindow

Question

我正在從公共汽車跟蹤器網站獲取json信息，並使用google map滾動自己，這顯然不那么漂亮。 目前，我不知道如何在打開信息窗口時對其進行更新。 我找到了一些示例，但似乎並沒有滿足我的要求。 我以某種方式設法使標記進行更新，並為每個“更新”移動，但是信息窗口沒有執行我想要的操作。 我希望能夠單擊一個標記並列出它，例如在信息窗口中說出車速。 當窗口仍然打開並且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); // 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元素，以供您更改ID並使用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>