谷歌地图用额外的细节填充文本字段

Question

我正在尝试使用数据库中的信息使用 dblclick 事件填充文本字段。当我双击标记时，会使用不正确的信息来填充字段。我双击任何标记都会得到相同的值。我尝试了各种方法来引用 colid、driver 和 vehicle 值，但如果我更改任何内容，我得到的只是字段中的未知值。

map = new google.maps.Map(document.getElementById("map"), map_options);
var infoWindow = new google.maps.InfoWindow;

downloadUrl(url, function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var ThisMarker = markers[i];
var InfoText = ThisMarker.getAttribute("InfoText");
var colid = ThisMarker.getAttribute("colid");
var driver = ThisMarker.getAttribute("driver");
var vehicle_reg = ThisMarker.getAttribute("vehicle");
var mtype = ThisMarker.getAttribute("type");
var point = new google.maps.LatLng(
    parseFloat(ThisMarker.getAttribute("lat")),
    parseFloat(ThisMarker.getAttribute("lng"))
);
var icon = customIcons[mtype] || {};
var marker = new google.maps.Marker({
    map: map,
    position: point,
    icon: icon.icon,
    clickable: true
});

bindInfoWindow(marker, map, infoWindow, InfoText);

if(mtype == 'col' || mtype == 'del') {
google.maps.event.addListener(marker, 'dblclick', function() {
document.getElementById("collivery_id").value = colid;
document.getElementById("command").value = 'action';
});
}

if(mtype == 'bike' || mtype == 'car' || mtype == 'bakkie' || mtype == 'truck') {
    google.maps.event.addListener(marker, 'dblclick', function() {
    document.getElementById("driver").value = driver;
    document.getElementById("vehicle").value = vehicle_reg;
});
}
}
});

function bindInfoWindow(marker, map, infoWindow, InfoText) {
    google.maps.event.addListener(marker, 'mouseover', function() {
    infoWindow.setContent(InfoText);
    infoWindow.open(map, marker);
});
google.maps.event.addListener(marker, 'mouseout', function() {
    infoWindow.close(map, marker);
});
}

Answer 1

使用函数闭包的可能解决方案：

map = new google.maps.Map(document.getElementById("map"), map_options);
var infoWindow = new google.maps.InfoWindow;

downloadUrl(url, function(data) {
  var xml = data.responseXML;
  var markers = xml.documentElement.getElementsByTagName("marker");
  for (var i = 0; i < markers.length; i++) {
    var ThisMarker = markers[i];
    var InfoText = ThisMarker.getAttribute("InfoText");
    var colid = ThisMarker.getAttribute("colid");
    var driver = ThisMarker.getAttribute("driver");
    var vehicle_reg = ThisMarker.getAttribute("vehicle");
    var mtype = ThisMarker.getAttribute("type");
    var point = new google.maps.LatLng(
      parseFloat(ThisMarker.getAttribute("lat")),
      parseFloat(ThisMarker.getAttribute("lng"))
    );
    var icon = customIcons[mtype] || {};
    var marker = new google.maps.Marker({
      map: map,
      position: point,
      icon: icon.icon,
      clickable: true
    });

    bindInfoWindow(marker, map, infoWindow, ThisMarker);
});

function bindInfoWindow(marker, map, infoWindow, marker)
{
  var InfoText = marker.getAttribute("InfoText");
  var colid = marker.getAttribute("colid");
  var driver = marker.getAttribute("driver");
  var vehicle_reg = marker.getAttribute("vehicle");
  var mtype = marker.getAttribute("type");
  if(mtype == 'col' || mtype == 'del') {
    google.maps.event.addListener(marker, 'dblclick', function() {
      document.getElementById("collivery_id").value = colid;
      document.getElementById("command").value = 'action';
    });
  }
  if(mtype == 'bike' || mtype == 'car' || mtype == 'bakkie' || mtype == 'truck') {
    google.maps.event.addListener(marker, 'dblclick', function() {
      document.getElementById("driver").value = driver;
      document.getElementById("vehicle").value = vehicle_reg;
    });
  }
  // whatever code is currently in your bindInfoWindow function
  // possibly this:
  google.maps.event.addListener(marker, 'mouseover', function() {
    infoWindow.setContent(InfoText);
    infoWindow.open(map, marker);
  });
  google.maps.event.addListener(marker, 'mouseout', function() {
    infoWindow.close(map, marker);
  });
}