更新打开 google 个地图信息窗口

Question

我正在玩弄从巴士跟踪器网站获取 json 信息并使用 google 地图滚动我自己的信息，显然不是那么漂亮。目前我不知道如何在打开时更新信息window。我找到了一些例子，但似乎没有什么适合我想要的。我以某种方式设法让标记在每次“更新”时更新和移动，但信息 windows 不符合我的要求。我希望能够单击一个标记并将其列出，例如信息 window 中的车速。当 window 仍然打开并且 json updates/downloads 时，标记将移动，我希望 window 的内容也以新的速度更新。那就是让一个 open infowindow 更新它的内容而不关闭它。

奖励：目标是使用复选框打开和关闭 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

如果要更改打开的信息窗口的内容，请在其中提供要更改的内容的 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>");

然后如果信息窗口打开，这应该可以工作：

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>

更新打开 google 个地图信息窗口

Update open google maps Infowindow

javascript

json

google-maps

infowindow