Google Map API v3 InfoWindow 无法使用函数中的 setContent 打开答案

【问题标题】：Google Map API v3 InfoWindow won't open with setContent from a functionGoogle Map API v3 InfoWindow 无法使用函数中的 setContent 打开
【发布时间】：2011-06-24 13:12:03
【问题描述】：

我有一个简单的 Google 地图 v3 代码。它创建地图并向markerCluster 添加一个标记。一切正常，除了将内容设置到 infoWindow 并打开它。函数getSupplierDetails() 只返回一个短字符串（即“Red Supply”）。

问题出在这里：如果我将文本“Red Supply”硬编码到 setContent 行，例如 infoWindow.setContent("Red Supply");，那么信息窗口可以正常打开内容。

但是，如果我按照下面的代码保留它，则信息窗口根本不会打开，尽管getSupplierDetails() 函数返回“红色供应”。

getSupplierDetails() 函数从 Firebug 返回此 JSON 字符串：{"popupContent": "Red Suppplier"}。

花了这么长时间没有任何解决方案。任何帮助表示赞赏。

谢谢

var map;
var markerCluster;
var infoWindow;

$(document).ready(function() {

  if (mapElem != null) {
        var latlng = new google.maps.LatLng(54.664936, -2.706299);
        var myOptions = {
            zoom: 5,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
        };

        map = new google.maps.Map(mapElem, myOptions);
        markerCluster = new MarkerClusterer(map);
        infoWindow = new google.maps.InfoWindow();

    AddMarkers();
  }
});

function AddMarkers(){
    markerCluster.clearMarkers();
    var marker = new google.maps.marker({position:latLng, map:map, title:"title"});

    google.maps.event.addListener(marker, 'click', function() {
      var res = getSupplierDetails();
      infoWindow.setContent(res);
      infoWindow.open(map, this);
    });

    markers.push(marker);
    markerCluster.addMarkers(markers);
}


function getSupplierDetails() { //returns {"popupContent": "Red Suppplier"}
    $.ajax({
        type: 'POST',
        url: "sitedetail.aspx",
        dataType: 'json',
        timeout: 30000,
        success: function(data) {
            return data.popupContent;
        },
        error: function(xhr, textStatus, thrownError) {
            var resp = JSON.parse(xhr.responseText);
            alert(resp.message);

        }
    });
}

【问题讨论】：

getSupplierDetails() 在哪里？没有它，我们不知道你做错了什么。
将 getSupplierDetails() 添加到问题中。但它只是返回一个字符串。
在getSupplierDetails()的第一行$.ajax({之前添加return
添加了return。这像以前一样调用该函数，但将一个 XMLHttpRequest 对象返回到我分配内容的部分。我正在努力从这个对象中提取数据。

标签： javascript google-maps-api-3 infowindow

【解决方案1】：

function getSupplierDetails() { // returns "Red Suppplier" or ""
    var content = '';
    $.ajax({
        type: 'POST',
        url: "sitedetail.aspx",
        dataType: 'json',
        timeout: 30000,
        success: function(data) {
            content = data.popupContent;
        },
        error: function(xhr, textStatus, thrownError) {
            var resp = JSON.parse(xhr.responseText);
            alert(resp.message);

        }
    });
    return content;
}

【讨论】：

由于某种原因，返回的值为空白。检查 readyState 返回 1，表明它在返回值时仍在加载（？）。无论如何，我已经将 setContent 行移到了 AJAX 调用的成功部分中。这似乎奏效了。感谢您的帮助。

【解决方案2】：

ajax 成功调用是异步的，这就是你得到 null 的原因，你所做的很好（将 SetContent 移动到成功部分）但你也可以这样做

google.maps.event.addListener(marker, 'click', function() {
  getSupplierDetails(function(res){
     infoWindow.setContent(res)
  });
  infoWindow.setContent(res);
  infoWindow.open(map, this);
});

function getSupplierDetails(callback) {
    $.ajax({
        type: 'POST',
        url: "sitedetail.aspx",
        dataType: 'json',
        timeout: 30000,
        success: function(data) {
            callback(data.popupContent);
        },
        error: function(xhr, textStatus, thrownError) {
            var resp = JSON.parse(xhr.responseText);
            alert(resp.message);

        }
    });
}

【讨论】：