更新打开的谷歌地图信息窗口

Question

我正在玩从公共汽车跟踪器网站获取 json 信息并使用谷歌地图滚动我自己的信息，显然不是那么漂亮。 目前我不知道如何在信息窗口打开时更新它。我找到了一些例子，但似乎没有什么适合我想要的。我以某种方式设法让标记为每次“更新”而更新和移动，但信息窗口并没有做我想要的。我希望能够点击一个标记并列出它，比如信息窗口中的车速。当窗口仍然打开并且 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>";

代码 sn-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>