如何使用infowindow数据填充侧边栏信息？ [英] How to populate sidebar information with infowindow data?

问题描述

我有一个功能完善的Google Maps V3地图，它的工作方式很好。但是，我不喜欢InfoWindows，因为它们在显示信息时占用了太多的地图空间。我的解决方案是将信息放置在地图右侧的侧边栏中。 InfoWindow中的信息将通过事件传递到侧边栏中，以首先清除现有数据，然后使用当前数据重新填充数据。

I have a fully-functioning Google Maps V3 map that works fine the way it is. However, I dislike InfoWindows because they take up too much map space when displaying the info. My solution around that is to place information in a sidebar to the right of the map. The information inside the InfoWindow would be transferred to a in that sidebar using an event to first clear existing data and then repopulate it with the current data.

我不确定如何从地图内部获取数据并将其带到外部，以及如何使用内部事件将该数据移动到点击外部。

I'm not sure how to take data from inside the map and bring it outside, nor how to use an event inside to move that that data outside on a 'click'.

  var infoWindow = new google.maps.InfoWindow;

  // Change this depending on the name of your PHP file
  downloadUrl("tests/cfdstationsxml.php", function(data) {
    var xml = data.responseXML;
    var markers = xml.documentElement.getElementsByTagName("marker");
    for (var i = 0; i < markers.length; i++) {
      var name = markers[i].getAttribute("name");
      var address = markers[i].getAttribute("address");
      var city = markers[i].getAttribute("city");
      var state = markers[i].getAttribute("state");
      var zip = markers[i].getAttribute("zip");
      var engine = markers[i].getAttribute("engine");
      var truck = markers[i].getAttribute("truck");
      var ambulance = markers[i].getAttribute("ambulance");
      var special_units = markers[i].getAttribute("special_units");
      var battalion = markers[i].getAttribute("battalion");
      var district = markers[i].getAttribute("district");
      var office = markers[i].getAttribute("office");
      var point = new google.maps.LatLng(
          parseFloat(markers[i].getAttribute("lat")),
          parseFloat(markers[i].getAttribute("lng")));
      var html = "<div id='info' style='overflow:hidden;line-height:15px;color:black;height:200px;width:225px;'><span style='font-weight:500;text-decoration:underline;font-size:13px;'>" + name + "</span><br><span style='font-size:10px;'>" + address + "<br>" + city + ", " + state + " " + zip + "</span><br><table style='color:black;font-size:12;'><tr><td>Engine:</td><td>" + engine + "</td></tr><tr><td>Truck:</td><td>" + truck + "</td></tr><tr><td>Ambulance:</td><td>" + ambulance + "</td></tr><tr><td>Special Units:</td><td>" + special_units + "</td></tr><tr><td>Battalion:</td><td>" + battalion + "</td></tr><tr><td>District:</td><td>" + district + "</td><tr><td>Office:</td><td>" + office + "</td></tr></tr></table></div>";
      var icon = 'http://www.radioman911.com/images/9px_marker.png'; // anywhere from 3px_marker.png to 8px_marker.png
      var marker = new google.maps.Marker({
        map: map,
        position: point,
        icon: icon,
        title: name,
      });
      bindInfoWindow(marker, map, infoWindow, html);
    }
  });
}
function bindInfoWindow(marker, map, infoWindow, html) {
  google.maps.event.addListener(marker, 'click', function() {
    $("#info").appendTo("#sidebar");  
    //infoWindow.setContent(lmth);
    infoWindow.open(map, marker);
  });
}
function downloadUrl(url, callback) {
  var request = window.ActiveXObject ?
      new ActiveXObject('Microsoft.XMLHTTP') :
      new XMLHttpRequest;
  request.onreadystatechange = function() {
    if (request.readyState == 4) {
      request.onreadystatechange = doNothing;
      callback(request, request.status);
    }
  };
  request.open('GET', url, true);
  request.send(null);
}
function doNothing() {}

任何帮助都可以非常感谢 - 这一直促使我坚持一个月的关闭！

ANY help at all would be much appreciated - this has been driving me nuts on and off for a month!!

Tim

推荐答案

这应该适用于'sidebar div的id'的正确值;

This should work for the correct value of 'id of your sidebar div';

function bindInfoWindow(marker, map, infoWindow, html) {
  google.maps.event.addListener(marker, 'click', function() {
   document.getElementById('id of your sidebar div').innerHTML = html;
  });
}

工作示例

这篇关于如何使用infowindow数据填充侧边栏信息？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！