代码之家 › 专栏 › 技术社区 › marr75

动态加载jquery Accordion中的Google地图

jquery google-maps jquery-ui ajax

1

marr75 · 技术社区 · 16 年前

我尝试在jqueryui中加载一个google地图,该地图与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。如果我注释掉地图行,一切都正常(除了地图本身)。

2 回复 | 直到 16 年前

1

rodrigot 15 年前

好吧,线程是死的,但由于我失去了一些小时在类似的问题,我想分享我的解决方案。我有一个jqueryui手风琴,每个窗格里都有谷歌地图。

问题是没有隐藏窗格的大小,googlemaps使用这个大小来渲染地图。

因此,我将每个“map”和“marker”(gmaps术语)保存在一个索引数组(var-maps)中,当用户更改相应的窗格时,我“刷新”相应的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);
            }
        });
    })
}

2

0

marr75 15 年前

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