Question

我正在尝试在jquery ui手风琴中加载一个谷歌地图，其内容由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);
   })
  }
 });

这是我当前的代码（谷歌地图API V3），但是当我点击时它会重定向到href的网址，显然没有谷歌地图，因为此响应中没有javascript。如果我注释掉地图线，一切正常（地图本身除外）。

Answer 1

好吧，线程已经死了，但由于我在类似问题上丢失了几个小时，我觉得我想分享我的解决方案。我在每个窗格中都有一个带有googlemap的jqueryui accordeon。

问题是手风琴没有隐藏窗格的大小，googlemaps使用该大小来渲染地图。

所以我在索引数组（var maps）中保存每个'map'和'marker'（gmaps术语），当用户更改accordeon窗格时，我'刷新'相应的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);
            }
        });
    })
}

Answer 2

直到现在我才发生这种情况，但由于每个手风琴的内容都是动态加载的，因此这构成了非法的跨站点请求。地图必须从我自己的网络服务器获取并传输到手风琴中的ajax请求，否则必须加载一次谷歌地图并将其操作到正在加载的手风琴窗格的dom中。

谷歌地图内部动态加载的jquery手风琴

2 个答案: