如何在图像中动态添加锚点

Question

当我们使用谷歌地图时，我们搜索完某物后，谷歌会在地图中添加一个标记。当我们点击这个标记时，会显示一个详细的信息窗口，就像这样：

我搜索“白宫”，然后它创建了一个标记“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)将点击事件绑定到地图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 clicking this feature,show the infomation window
     //show tip,see the iamge:
   }
 }

});

以上是我目前能想到的。但是好像还不够，还有一些问题：

1) 提示信息窗口只有在用户点击或鼠标悬停在与该要素的经纬度相同的点时才会显示，但是在google Map中，您会发现如果将鼠标悬停在标记（在标记的任何点），提示将显示。将导致提示显示的区域与标记的区域相同。

似乎谷歌做了这样的事情：

$("#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
   }
 }
});

但marder大小不一样，他们如何计算使tip显示的真实区域？

2）在事件句柄函数中，我对所有特征进行了迭代，以查看当前鼠标的位置是否与任何特征匹配，如果当前地图视图中的特征太多，那么它一定会导致性能问题。

Answer 1

这可能是图像或地图 div 的 onclick 事件。您可以在任何 DOM 元素上放置 onclick 处理程序。在这种情况下，他们可能会将事件放在地图 div 上，因为可能有很多图像会有事件，这可能是一个性能问题。

当您在父元素中处理子元素的点击事件时，称为事件委托。 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;  
  }  
}); 

至于让图片看起来像一个锚点（即鼠标指针图标），可以通过设置cursor属性用css来设置：

#map_canvas img { cursor: pointer }