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

当我们使用谷歌地图时，在我们搜索某物后，谷歌会在地图上添加一个标记。单击此标记时，将显示一个详细信息窗口，如下所示：

我搜索“白宫”，然后它创建一个标记“a”

这并不难。然而，我发现了更有趣的事情：

在地图视图中，即使我们不搜索任何内容，当地图缩放到某个指定级别时，也会生成一些锚。如果鼠标悬停或单击它，它将相应地显示某些内容，请参见下图：

此处见点“14H和F st NW”。我没有寻找它，但它给了我一个锚。当我点击它时，它会相应地显示一个信息窗口

但当我使用Firebug查看下载的内容时，我发现它们只是图像。我在HTML中找不到任何

标记

此外，通过Firebug，我发现当地图级别更改时，浏览器将向服务器发送请求，以获取当前地图视图中的要素。响应是JSON格式的。它包含要素的位置和名称，然后在地图中添加定位点

但我想知道他们是如何实施的

---

---

可能的实施方式：

1） 当地图缩放或平移时，从服务器请求要素位置数据，假设他们获得以下数据（仅以白宫为例）：

数据：{{姓名：'白宫'，纬度：-77经度：38}

2） 将鼠标悬停事件绑定到map 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:
   }
 }

});

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

$（“#映射”）.mousemove（函数（e）{
对于（var i=0；i它可能是映像或映射div的事件。您可以在任何DOM元素上放置onclick处理程序。在这种情况下，如果他们将事件放置在映射div上，则可能会发生此事件，因为可能有很多映像会发生事件，这可能会导致性能问题

当处理父元素中的子元素的单击事件时，它称为事件委派。jQuery提供了两个用于执行事件委派的函数和。其他库也提供了此功能，但您可以阅读此或此的基本知识

他们可能正在做类似（修改自）：

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

#map_canvas img { cursor: pointer }

也许你误解了我的意思。当我点击“#map#u canvas img”时，什么都没有发生，信息窗口只有在我点击img内的某个点时才会打开。此外，图像看起来不像锚，只是当鼠标移到图像内的点上时，图像内的点看起来像锚。在这种情况下，他们将屏幕位置从点击转换为坐标，并以这种方式弹出气泡。相同的一般理论，不同的条件如果你使用他们的事件函数，你应该能够使用一个类来检查用户点击的位置是否在点的短范围内你想要。谢谢你的回复，我对这种方式很感兴趣，但我能理解，你能给我一个简短的exmaple吗？首先显示一个图像，然后在图像的某个地方创建一个锚吗？@Lamback：我读了这个教程。它与活动委派有关，但在我的问题中，谷歌地图，我找不到任何在html中创建的锚，w这是怎么回事？@hguser:click事件有相关的鼠标位置数据。如果你点击一个图像并在图像上有onclick事件，你就可以知道了。从这里开始，只要你知道感兴趣的东西在哪里，就可以知道你是否点击了感兴趣的东西。
// 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;  
  }  
}); 

#map_canvas img { cursor: pointer }