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

Update open google maps Infowindow

本文关键字:信息 信息窗 窗口 谷歌地图 更新      更新时间:2023-09-26

我在玩从公交车追踪器网站获取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");
    }
  });
}

如果您想更改打开的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>