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

问题描述：

我想加载一个谷歌地图内jquery ui手风琴与内容加载ajax。谷歌地图内动态加载的jquery手风琴

$("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），但是当我没有谷歌地图点击当前，显然是因为有这个回应没有的JavaScript重定向到该HREF的URL。如果我注释掉地图线，一切正常（除了地图本身）。

你能提供关联的HTML吗？听起来像你可能不会阻止默认操作或返回错误点击h2>链接... – Andrew 2010-05-14 17:27:43

答

到现在为止我没有想到，但由于每个手风琴的内容都是动态加载的，因此这构成了非法的跨站点请求。该地图必须从我自己的网络服务器获得并传输到手风琴中的ajax请求，或者谷歌地图必须加载一次并操纵到正在加载的手风琴窗格的窗口中。

为什么不能AJAX到PHP脚本并卷曲在地图上？ – Nic 2011-03-30 15:50:25

编辑以反映您的评论，PHP不会是我选择的场景，但更广泛地说，ajax到您自己的域上的web服务，它将为您提供地图的一些表示。 – marr75 2011-03-30 16:35:22

是的，我在那里做了一个假设（对不起，我读/主要回答PHP的问题，哈哈）。但是，我知道这是一个常见的解决方法。 – Nic 2011-03-30 16:57:03

答

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

问题是accordeon没有隐藏窗格的大小，并且googlemaps使用该大小来渲染地图。因此我将所有'map'和'marker'（gmaps术语）保存在索引数组（var maps）中，当用户更改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); 
      } 
     }); 
    }) 
}

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

相关推荐