Question

我正在玩公共汽车追踪网站获取json信息并使用谷歌地图滚动我自己，显然不那么漂亮。目前我无法弄清楚如何在打开时更新信息窗。我找到了一些例子，但似乎没有什么能用于我想要的东西。我以某种方式设法让标记更新并移动每个“更新”但信息窗口不能做我想要的。我希望能够点击一个标记并列出它，比如说infowindow中的车速。当窗口仍然打开并且json更新/下载时，标记将移动，我希望窗口的内容也以新的速度更新。这是一个开放的infowindow更新其内容而不关闭它。

Bonus：目标是通过复选框打开和关闭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的内容，请在其中指定要更改id的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>";

代码段

＆＃13;

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);

＆＃13;

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

＆＃13;

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

＆＃13;

更新开放的谷歌地图Infowindow

1 个答案: