谷歌地圖裏的互動地圖裏面的互動

我在stackoverflow中問過這個問題，但是我沒有得到我想要的最終答案。谷歌地圖裏的互動地圖裏面的互動

所以我想再次發佈它，並給出更多的細節。

的一部開拓創新後可以found here

當mosue過的地圖圖塊（IMG）功能，將光標改爲「指針」，您可以點擊正確的地方，那麼你會得到informatin窗口。這就是我的意思是「互動」。

在我看來，當我們拖動或縮放地圖時，google會向服務器發出請求，以獲取當前地圖視圖中的要素。然後，當鼠標移動到一個特徵的Bound中時，效果就會發生。

但是我想知道它怎麼會如此精確？

以這種瓷磚作爲〔實施例：

enter image description here

要素的區域「雷德利......」是不是正規的矩形，如果你的鼠標是沒有這個功能的領域，光標不會改變。

但是，一旦你的鼠標來對了地方，效果會出來（此功能的區域內），檢查：

enter image description here

由於鼠標的位置是precisly的區域內該功能，所以我可以點擊它並獲取信息窗口。

我只想知道如何實現這個？

更新：

的影響只出來當鼠標在一定的區域，檢查：

enter image description here

效果出來只有在突出顯示的矩形內的鼠標移動地區，非常精確。

來源

2011-09-01 hguser

是否有可能他們正在使用基於多邊形的AREA標記：http://www.w3.org/TR/html4/struct/objects.html#edef-AREA？

根據定義，這些標籤不需要是矩形。他們可以使用類似<area shape='poly' coords='...'>這樣的座標可以如他們所期望的那樣精確。

更新：我沒有機會回答之前檢查http://maps.google.com，但我現在可以他們不使用圖像映射，因此，該功能不是基於AREA標記告訴。但是，如果您希望使用非矩形圖像覆蓋圖的功能，我的初始響應仍然存在。

來源

2011-09-01 15:19:06 jcm

這使用JavaScript和實際顯示的內容已經從可用服務器填充到div元素中，並顯示none樣式屬性。縮放級別爲16的每個256 x 256圖像都包含有關x和y以及服務器的信息。在查看谷歌地圖時，使用firebug來查看代碼的變化，並且您會注意到圖像列表底部的很多div元素都帶有類「css-3d-bug-fix-hack」。其中一個元素也會有兒童。第一個孩子隱藏。只需從該孩子中刪除顯示無任何顯示，它就會出現。

要實現這樣的功能，您需要知道如何使用javascript獲取光標位置，如何查找光標是否位於使用javascript的div元素中，或者您可以使用JQuery選擇器來測試當前某個類型的Histed元素。您還需要了解CSS中的絕對定位。然後使用javascript來隱藏和顯示位於cusrsor位置的元素。

來源

2011-09-01 15:30:18

我知道如何使用DOM事件泡泡來製作我想要的東西，我只是想知道他們如何精確地計算區域。如果可能，請參閱我的更新 – hguser

鼠標位置總是基於像素。在640x480或800x600分辨率下嘗試相同，您將看到每個像素的所有變化，而不是在亞像素級別。一旦你獲得了鼠標位置，那麼它也可以使用子像素位置，但Google不使用子像素位置。所有這些區域都被定義並映射到屏幕上的像素。當我們與Map進行交互時，映射也會得到更新。這是谷歌地圖API發揮其作用的地方。看看他們的[Polygon和Ployline功能]（http://code.google.com/apis/maps/documentation/javascript/overlays.html#Polygons） –

他們記錄每個區域的功能圖標？ – hguser

甲google.maps.Marker對象可以收聽到以下用戶的事件，例如：

'click' 'dblclick' 'mouseup' 'mousedown' 'mouseover' 'mouseout'

http://code.google.com/apis/maps/documentation/javascript/events.html

GoogleMap的使用信息窗口超過疊加數據的說明標記。

InfoWindows在地圖上方的浮動窗口中顯示內容。信息窗口看起來有點像漫畫書一樣的氣球;它有一個內容區和一個錐形杆，杆的尖端位於地圖上的指定位置。點擊Google地圖上的商戶標記，即可在行動中看到信息窗口。 InfoWindow構造函數接受InfoWindow選項對象，該對象指定用於顯示信息窗口的初始參數的集合。創建後，信息窗口不會添加到地圖中。要使信息窗口可見，您需要調用InfoWindow上的open（）方法，將傳遞給要在其上打開的Map，以及可選地將標記與錨定。（如果未提供任何標記，信息窗口將在其 position屬性打開。）

http://code.google.com/apis/maps/documentation/javascript/overlays.html#InfoWindows

創建一個標記，並用鼠標懸停事件

var myLatlng = new google.maps.LatLng(-25.363882,131.044922); 
var myOptions = { 
    zoom: 4, 
    center: myLatlng, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
} 

var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

var contentString = '<div id="content">'+ 
    '<div id="siteNotice">'+ 
    '</div>'+ 
    '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+ 
    '<div id="bodyContent">'+ 
    '<p><b>Uluru</b>, Test 
    '</div>'+ 
    '</div>'; 

var infowindow = new google.maps.InfoWindow({ 
    content: contentString 
}); 

var marker = new google.maps.Marker({ 
    position: myLatlng, 
    map: map, 
    title:"Uluru (Ayers Rock)" 
}); 

google.maps.event.addListener(marker, 'mouseover', function() { 
    infowindow.open(map,marker); 
});

附加信息窗口

EDITED看完評論後

Google地圖廣泛使用JavaScript。當用戶拖動地圖時，網格方塊將從服務器下載並插入到頁面中。當用戶搜索業務時，結果會在後臺下載以插入側面板和地圖;該頁面不重新加載。位置是通過在地圖圖像頂部放置一個紅色針腳（由幾個部分透明的PNG組成）動態繪製的。

使用表單提交的隱藏IFrame，因爲它保留了瀏覽器歷史記錄。出於性能原因，該站點還使用JSON進行數據傳輸而不是XML。這些技術都屬於廣泛的Ajax保護傘。 [編輯]

來源

2011-09-10 18:43:17

謝謝，但信息窗口如何打開不是重點。我關心他們如何觸發mousemove事件，只有鼠標進入指定區域時觸發事件（顯示inforwindow），但此區域不規則。 – hguser

谷歌地圖裏的互動地圖裏面的互動

回答

相關問題