ajax - 谷歌地图 : openInfoWindowTabsHtml + GDownloadUrl (Ajax call) question-6ren

ajax - 谷歌地图 : openInfoWindowTabsHtml + GDownloadUrl (Ajax call) question

转载作者：行者123 更新时间：2023-12-01 16:08:48

我面临以下问题。在 Google map 上，我想添加带有选项卡的信息窗口，其中的内容是使用 GDownloadUrl 方法从外部文件加载的。该代码工作正常，但有两个问题。a) 我第一次点击标记时，没有任何反应。我需要点击两次才能得到一个信息框。之后它工作正常。b) 当我关闭信息框并再次打开时，选项卡会重复出现。每次我重新打开信息框时，这些选项卡都会重复出现。因此，如果使用下面的代码并打开信息框 3 次，我会得到 6 个选项卡(信息、照片、信息、照片、信息、照片)。知道我在这里做错了什么吗？

我也尝试过使用 JQuery 的 $.get 方法，但结果完全一样。

function createREMarker(lat,long,reID)
{
    var reMarker = new GMarker(rePoint,iconRE);
    GEvent.addListener(reMarker, "click", function()
    {
        GDownloadUrl('testcontent.php?reID='+reID+'&what=info', function(data) {
            content1 = data;
        });
        GDownloadUrl('testcontent.php?reID='+reID+'&what=photos', function(data) {
            content2 = data;
        });
        tabs.push(new GInfoWindowTab('Info', '<div id="mapOverlayContent" style="width:375px; height:220px; overflow:auto;">'+content1+'</div>'));
        tabs.push(new GInfoWindowTab('Photos', '<div id="mapOverlayContent" style="width:375px; height:220px; overflow:auto;">'+content2+'</div>'));
        reMarker.openInfoWindowTabsHtml(tabs);
    });
    return reMarker;
};

最佳答案

首先，您使用的是现已正式弃用的 API v2。对于我维护的站点，我执行以下操作(这是 API 的 v3 并使用 jQuery):

function createMarker(point, id, markerOptions) {
    var marker = new google.maps.Marker(point,markerOptions);
    var Lat = point.lat();
    var Lng = point.lng();

    google.maps.Event.addListener(marker, "click", function() {
        $.ajax({
            type: "GET",
            url: "/data/specific.xml?id=" + id,
            dataType: "xml",
            success: function(xml) {
               var this_marker = $(xml).find('marker');
               var name = $(this_marker).attr("name");
               details_tab = details_tab + "ID: " + id + "<br />Name: " + name + "<br />";
               var infowindow = new google.maps.InfoWindow({
                   content: details_tab,
               });
               infowindow.open(map, marker);
            }
        });
    }
    return marker;
}