如何在圖片中動態添加錨點

Question

當我們使用Google地圖時，在搜索內容後，Google會在地圖上添加一個標記。當我們點擊這個標記，詳細信息窗口將顯示，就像這樣：

我搜索了「白宮」，然後創建一個標記「A」。

這並不難。不過我發現一些更有意思的東西：

在地圖視圖中，即使我們不搜索任何東西，當地圖放大到某個指定的等級時，會有一些錨點產生。如果鼠標或點擊它，它會顯示相應的東西，看到的圖像：

這裏看到這一點「14H和F ST NW」。我沒有搜索它，但它顯示了我的一個錨。當我點擊它時，會顯示相應的信息窗口。

但是當我使用Firebug來查看下載內容時，我發現它們只是圖像。我在HTML中找不到任何<a>標籤。

此外，通過Firebug，我發現當地圖級別發生變化時，瀏覽器會向服務器發送請求以獲取當前地圖視圖中的要素。響應是JSON格式。它包含要素的位置和名稱，然後在地圖中添加錨點。

但我想知道他們如何實現它？

---

---

可能的方式來實現這一點：

1）時，地圖縮放或平移，從服務器請求功能部件的位置數據，假設他們得到以下數據（只取白家爲例）：

數據：{{名稱： '白宮'，緯度：-77經度：38}}

2）結合鼠標事件，以在地圖上的div，這樣的事情：

$("#map").mousemove(function(e){ 
for(var i=0;i<data.length;i++){ 
    if(e.clientX=getImageX(data[i].x) && e.clientY=getImageY(data[i].y)){ 
    //it mean that the mouse is overing this feature,now set the cousor and show the tip 
    //show tip,see the iamge: 
    } 
} 

}); 

3）單擊事件綁定到地圖格」

$("#map").mousemove(function(e){ 
for(var i=0;i<data.length;i++){ 
    if(e.clientX=getImageX(data[i].x) && e.clientY=getImageY(data[i].y)){ 
    //it mean that the mouse is clicking this feature,show the infomation window 
    //show tip,see the iamge: 
    } 
} 

}); 

以上是我能到吼聲現在。但它似乎還不夠，還是有一些問題：

1）只有當用戶點擊或鼠標點在與點的緯度和經度相同的點上時，功能，但在谷歌地圖，你會發現，如果鼠標在標記（在標記的任何點），小費將顯示。引起筆尖顯示的區域與標記區域相同。

看來，谷歌做些事情是這樣的：

$("#map").mousemove(function(e){ 
for(var i=0;i<data.length;i++){ 
    if(e.clientX.insideTheMarker(data[i]) && e.clientY=insideTheMarker(data[i])){ 

    //it mean that the mouse is clicking this feature,show the infomation window 
    } 
} 
}); 

但黃鼠狼大小是不一樣的，他們怎麼caculate真正的區域，這將使尖端節目？2）在事件處理函數中，如果當前鼠標的位置與任何特徵匹配，如果當前地圖視圖中的特徵太多，我必須對所有特徵進行迭代，因此它必須導致性能問題。

Answer 1

這可能是圖像或地圖div的onclick事件。你可以在任何DOM元素上放置一個onclick處理程序。在這種情況下，他們可能如果他們將事件放在地圖div上，因爲可能會有很多圖像會發生事件，這可能是性能問題。

當您處理父元素中的子元素的click事件時，它被稱爲事件委託。 jQuery提供了2個用於做事件委託的功能.live和.delegate。其他庫也提供此功能，但您可以閱讀關於此基礎知識general javascript turorial或此jQuery specific tutorial。

他們可能做這樣的事情（從here修改）：

// Get the map canvas 
var mapcanvas = document.getElementById('map_canvas'); 

// Quick and simple cross-browser event handler - to compensate for IE's attachEvent handler 
function addEvent(obj, evt, fn, capture) { 
    if (window.attachEvent) { 
     obj.attachEvent("on" + evt, fn); 
    } 
    else { 
     if (!capture) capture = false; // capture 
     obj.addEventListener(evt, fn, capture) 
    } 
} 

// Check to see if the node that was clicked is an anchor tag. If so, proceed per usual. 
addEvent(mapcanvas, "click", function(e) { 
    // Firefox and IE access the target element different. e.target, and event.srcElement, respectively. 
    var target = e ? e.target : window.event.srcElement; 
    if (target.nodeName.toLowerCase() === 'img') { 
    alert("clicked"); 
    return false; 
    } 
}); 

至於使圖像看起來像一個錨（即指針鼠標圖標），可以用CSS通過設置來設置光標屬性：

#map_canvas img { cursor: pointer }