谷歌地圖內動態加載的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。如果我註釋掉地圖線，一切正常（除了地圖本身）。

來源

2010-05-14 marr75

你能提供關聯的HTML嗎？聽起來像你可能不會阻止默認操作或返回錯誤點擊h2>鏈接... – Andrew 2010-05-14 17:27:43

到現在爲止我沒有想到，但由於每個手風琴的內容都是動態加載的，因此這構成了非法的跨站點請求。該地圖必須從我自己的網絡服務器獲得並傳輸到手風琴中的ajax請求，或者谷歌地圖必須加載一次並操縱到正在加載的手風琴窗格的窗口中。

來源

2011-03-30 15:48:25 marr75

爲什麼不能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); 
      } 
     }); 
    }) 
}

來源

2011-05-06 07:10:54 rodrigot

谷歌地圖內動態加載的jquery手風琴

回答

相關問題