Ajax 动态加载jquery手风琴中的Google地图

我正试图在jqueryui中加载一个谷歌地图，该地图与ajax加载的内容一致

 $("h2", "#accordion").click(function(e) {
  var contentDiv = $(this).next("div");
  if (contentDiv.children().length == 1)
  {
   contentDiv.load($(this).find("a").attr("href"));
   contentDiv.ready(function(){
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
     zoom: 8,
     center: latlng,
     mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
   })
  }
 });

---

这是我当前的代码（Google Maps API V3），但当我当前单击时，它会重定向到href的url，显然没有Google map，因为此响应中没有javascript。如果我注释掉地图行，一切正常（除了地图本身）。

直到现在我才想到这一点，但由于每个手风琴的内容都是动态加载的，这构成了非法的跨站点请求。地图必须从我自己的web服务器上获取，并传输到accordion中的ajax请求，或者谷歌地图必须加载一次，并操纵到正在加载的accordion窗格的dom中。

我直到现在才想到，但由于每个accordion的内容都是动态加载的，这构成非法的跨站点请求。地图必须从我自己的web服务器上获得，并传输到accordion中的ajax请求，或者谷歌地图必须加载一次，并被操纵到正在加载的accordion窗格的dom中。

好吧，线程已经死了，但由于我在类似问题上浪费了一些时间，我想分享我的解决方案。 我有一个jqueryui手风琴，每个窗格中都有谷歌地图

问题是没有隐藏窗格的大小，谷歌地图使用该大小来渲染地图

因此，我将每个“映射”和“标记”（gmap术语）保存在一个索引数组（var映射）中，当用户更改相应的窗格时，我“刷新”相应的gmap。 问题是，事件大小调整还不够，您必须强制缩放以重新绘制，甚至因为它在关闭的窗格上的大小，您的地图标记完全脱离屏幕，因此您必须根据标记位置重新居中

$(document).ready(function(){
    if($('div.map_canvas').length>0) initializeMap(); //init map
    if($('#accordion').length>0) $("#accordion .items").accordion(); //init accordeon

    $("#accordion .items").bind("accordionchange", function(event, Element) {
        current=maps[Element.options.active];
        google.maps.event.trigger(current.map, 'resize');    //resize
        current.map.setZoom( current.map.getZoom() );        //force redrawn
        current.map.setCenter(current.marker.getPosition()); //recenter on marker
    })
});

var maps=Array();
function initializeMap() {
        var geocoder;
        $('div.map_canvas').each(function(index,Element) {
        var address = $(Element).text();
        var myOptions = {
            zoom: 15,
            navigationControl: true,
            navigationControlOptions: { style: google.maps.NavigationControlStyle.SMALL },
            mapTypeControl: true,
            mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
            scaleControl: true,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        geocoder = new google.maps.Geocoder();
        geocoder.geocode({'address': address}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                myOptions.center = results[0].geometry.location;
                map = new google.maps.Map(Element, myOptions);
                marker = new google.maps.Marker({
                    map: map,
                    position: results[0].geometry.location,
                });
                maps.push({marker:marker,map:map}); //save those
            } else {
                alert('The address could not be found for the following reason: ' + status);
            }
        });
    })
}

---

嗯，线程已经死了，但由于我在类似问题上损失了几个小时，我想分享我的解决方案。 我有一个jqueryui手风琴，每个窗格中都有谷歌地图

问题是没有隐藏窗格的大小，谷歌地图使用该大小来渲染地图

因此，我将每个“映射”和“标记”（gmap术语）保存在一个索引数组（var映射）中，当用户更改相应的窗格时，我“刷新”相应的gmap。 问题是，事件大小调整还不够，您必须强制缩放以重新绘制，甚至因为它在关闭的窗格上的大小，您的地图标记完全脱离屏幕，因此您必须根据标记位置重新居中

$(document).ready(function(){
    if($('div.map_canvas').length>0) initializeMap(); //init map
    if($('#accordion').length>0) $("#accordion .items").accordion(); //init accordeon

    $("#accordion .items").bind("accordionchange", function(event, Element) {
        current=maps[Element.options.active];
        google.maps.event.trigger(current.map, 'resize');    //resize
        current.map.setZoom( current.map.getZoom() );        //force redrawn
        current.map.setCenter(current.marker.getPosition()); //recenter on marker
    })
});

var maps=Array();
function initializeMap() {
        var geocoder;
        $('div.map_canvas').each(function(index,Element) {
        var address = $(Element).text();
        var myOptions = {
            zoom: 15,
            navigationControl: true,
            navigationControlOptions: { style: google.maps.NavigationControlStyle.SMALL },
            mapTypeControl: true,
            mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
            scaleControl: true,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        geocoder = new google.maps.Geocoder();
        geocoder.geocode({'address': address}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                myOptions.center = results[0].geometry.location;
                map = new google.maps.Map(Element, myOptions);
                marker = new google.maps.Marker({
                    map: map,
                    position: results[0].geometry.location,
                });
                maps.push({marker:marker,map:map}); //save those
            } else {
                alert('The address could not be found for the following reason: ' + status);
            }
        });
    })
}

---

你能提供相关的HTML吗？听起来您可能没有阻止默认操作或单击h2>链接返回false…您可以提供相关的HTML吗？听起来您可能没有阻止默认操作或单击h2>链接返回false…为什么不将AJAX添加到PHP脚本并在地图上卷曲？编辑以反映您的评论，PHP不是我在该场景中的选择，但更广泛地说，将AJAX添加到您自己域上的Web服务，这将为您提供地图的一些表示。是的，我在那里做了一个假设（对不起，我读了/回答了大部分PHP问题，哈哈）。但是，是的，我知道这是一个常见的解决方法。为什么不将AJAX应用于PHP脚本并在地图上卷曲？编辑以反映您的评论，PHP不是我在该场景中的选择，但更广泛地说，将AJAX应用于您自己域上的Web服务，这将为您提供地图的一些表示。是的，我在那里做了一个假设（对不起，我读了/回答了大部分PHP问题，哈哈）。但是，是的，我知道这是一个常见的解决方法。