Question

我正在从xml文件中将一堆标记加载到谷歌地图中。每个标记的名称将与服务器上的图像文件夹相对应。填充信息框时，我想显示相应文件夹中的所有图像。

www.frackwatch.co.za

除了图像不显示外，一切正常。取而代之的是[Object] [Object]。

function load() {
  var map = new google.maps.Map(document.getElementById("map"), {
    center: new google.maps.LatLng(-31.5, 24.0),
    zoom: 7,
    mapTypeId: 'satellite'
  });

  var infoWindow = new google.maps.InfoWindow;

  // Change this depending on the name of your PHP file
  downloadUrl("genxml.php", function(data) {
    var xml = data.responseXML;
    var markers = xml.documentElement.getElementsByTagName("marker");
    for (var i = 0; i < markers.length; i++) {

      var info = markers[i].getAttribute("info");
      var name = markers[i].getAttribute("name");
      var point = new google.maps.LatLng(
          parseFloat(markers[i].getAttribute("lat")),
          parseFloat(markers[i].getAttribute("lng")));
      var folder = "attachments/" + name +"/";

      var html = "<b>" + info + "</b> <br/>" + $.ajax({
        url : folder,
        success: function (data) {
          $(data).find("a").attr("href", function (i, val) {
            if( val.match(/\.(jpeg|png|gif)$/) ) {
              $("body").append( "<img src='"+ folder + val   +"'>" );
            }
          });
        }
      });

      var marker = new google.maps.Marker({
        map: map,
        position: point,
        icon: icn
      });
      bindInfoWindow(marker, map, infoWindow, html);
    }
  });
}

function bindInfoWindow(marker, map, infoWindow, html) {
  google.maps.event.addListener(marker, 'click', function() {
    infoWindow.setContent(html);
    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() {}

<div id="map"></div>

更正代码但仅加载第一个标记的图像：

function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(-29, 25.0),
zoom: 6,
mapTypeId: 'satellite'
});

var infoWindow = new google.maps.InfoWindow;

// Change this depending on the name of your PHP file
downloadUrl("genxml.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {

  var info = markers[i].getAttribute("info");
  var id = markers[i].getAttribute("id");
  var point = new google.maps.LatLng(
      parseFloat(markers[i].getAttribute("lat")),
      parseFloat(markers[i].getAttribute("lng")));
  var folder = "/attachments/" + id +"/";

var marker = new google.maps.Marker({
    map: map,
    position: point,
    icon: icn
  });
$.ajax({
url : folder,
success: function (data) {
    var html = "<b>" + info + "</b><br/>";
    $(data).find("a").each(function () {
    $this = $(this)
    if($this.attr('href').match(/\.(jpg|png|gif|jpeg)$/)) {
    html +=  "<img src="+ folder + $this.attr('href') + ">";
  }
});
bindInfoWindow(marker, map, infoWindow, html);
}
});  
}
});
}

function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
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() {}

Answer 1

var html = "<b>" + info + "</b> <br/>" + $.ajax({url : folder,success:     function (data) {$(data).find("a").attr("href", function (i, val) {if( val.match(/\.(jpeg|png|gif)$/) ) { $("body").append( "<img src='"+ folder + val   +"'>" );} });}});;

$.ajax函数不返回任何内容。检查documentation。所以var html = [...] + $.ajax被打破了。

您是否正在尝试在InfoWindow中的文件夹中显示所有图像？如果是这样，它应该是这样的：

var folder = "attachments/" + name +"/";
var marker = new google.maps.Marker({
    map: map,
    position: point,
    icon: icn
});

$.ajax({
  url : folder,
  success: function (data) {
    var html = "<b>" + info + "</b> <br/>";
    $(data).find("a").each(function () {
      $this = $(this)
      if($this.attr('href').match(/\.(jpeg|png|gif)$/)) {
        html +=  "<img src=" +  $this.attr('href') + ">";
      }
    });
    bindInfoWindow(marker, map, infoWindow, html);
   }
 });

bindInfoWindow应该在ajax回调中，否则结果可能就在那里。

更简洁的方法是genxml.php列出所有图片，因此您不必在之后请求文件夹中的文件。

我想在谷歌地图信息窗口中加载文件夹中的所有图像

1 个答案: