如何动态地在图像中添加锚点 [英] How do add anchor in the image dynamically
问题描述
当我们使用Google地图时，我们搜索了某些内容后，Google会在地图上添加一个标记。当我们点击这个标记时，会显示一个详细的信息窗口，就像这样：
我搜索白宫，然后创建一个标记A。
这并不难。不过，我发现了一些更有趣的东西：在地图视图中，即使我们不搜索任何东西，当地图放大到某个指定的层次时，也会有一些锚点生成。如果鼠标悬停在它上面或点击它，它会显示相应的内容，请参阅图片：
在这里可以看到14H和F st NW这一点。我没有搜索它，但它显示了我的一个锚。当我点击它时，它会相应地显示一个信息窗口。
但是，当我使用Firebug查看正在下载的内容时，我发现它们只是图像。我无法在HTML中找到任何< a> 标签。
但我不知道它们是如何实现的？
可能的实现方式：
$ b $ 1）当地图缩放或平移时，从服务器请求功能位置数据，假设他们得到以下数据（以白宫为例）：
$ b
data：{{name：'white house'，Latitude ：-77 longitude：38}}
将鼠标悬停在地图div上，如下所示：
mousemove（function（e）{
for（var i = 0; i< data.length; i ++）{$ b $（$＃$）如果（e.clientX = getImageX（data [i] .x）&& e.clientY = getImageY（data [i] .y））{
//这意味着鼠标覆盖了这个特性，现在设置cousor并显示提示
//显示提示，查看图标：
}
}
}）;
3）将click事件绑定到地图div
<$ p （$ var $ = $; i
//这意味着鼠标点击此功能，显示infomation window
// show tip，see the iamge：
}
}
}）;
以上是我可以一直到现在为止的内容，但似乎还不够，仍然存在一些问题：
1）只有当用户点击或浏览与地图的纬度和经度相同的点时，提示信息窗口才会显示，但在Google地图中，您会发现如果鼠标在标记上（在标记的任何点），尖端将显示。将导致尖端显示的区域是山姆e作为标记的区域。
看起来谷歌做的是这样的：
$（ #map）。mousemove（function（e）{
for（var i = 0; i< data.length; i ++）{
if（e.clientX.insideTheMarker（data [i]） & e.clientY = insideTheMarker（data [i]））{
//这意味着鼠标点击此功能，显示信息窗口
}
}
}）;
但marder的大小不一样，他们如何计算真正的区域，这将使小费2）在事件句柄函数中，我必须遍历所有的特征，以查看当前鼠标的位置是否与任何特征匹配，如果特征当前地图视图太多了，所以它必须导致性能问题。 //developer.mozilla.org/en/DOM/element.onclickrel =nofollow> onclick 事件的图像或地图div。你可以在任何DOM元素上放置一个onclick处理程序。在这种情况下，他们可能如果他们将事件放在地图div上，因为可能会有很多图像会发生事件，这可能是性能问题。
当您在父元素中处理子元素的click事件时，它被称为事件委托。 jQuery提供了两个函数用于执行事件代理 .live 和。代表。其他库也提供了这种功能，但您可以阅读关于这些基础知识一般javascript turorial 或者 jQuery特定教程。
他们可能正在做类似的事情（从这里）：
//获取地图画布
var mapcanvas = document.getElementById（'map_canvas'）;
//快速简单的跨浏览器事件处理程序 - 补偿IE的attachEvent处理程序
函数addEvent（obj，evt，fn，capture）{
if（window.attachEvent ）{
obj.attachEvent（on+ evt，fn）;
}
else {
if（！capture）capture = false; //捕获
obj.addEventListener（evt，fn，capture）
}
}
//检查被点击的节点是否是锚标签。如果是这样，按平常进行。
addEvent（mapcanvas，click，function（e）{
// Firefox和IE分别访问不同的目标元素e.target和event.srcElement
var target = e.e.target：window.event.srcElement;
if（target.nodeName.toLowerCase（）==='img'）{
alert（clicked）;
return false ;
}
}）;
至于使图像看起来像一个锚点（即指针鼠标图标），可以通过设置游标属性来设置CSS：
#map_canvas img {cursor：pointer}
When we use Google Maps, after we search something, Google will add a marker in the map. When we click on this marker, a detailed information window will show, just like this :
I search the "white house",then it create a marker "A".
This is not difficult. However I found something more interesting:
In the map view, even we do not search anything, when the map zoom to some specified level, there will be some anchors generated. If the mouse over it or click it, it will show something accordingly, see the image:
Here see the point "14H and F st NW". I did not search for it, but it show me an anchor. When I click it, it show me a information window accordingly.
But when I use Firebug to see what is downloading, I found that they are just images. I can not find any <a> tag in the HTML.
Also, through Firebug, I found when the map level changed, the browser will send a request to the server to get the features inside the current map view. The response are JSON format. It contain the location and name of the features, then it add the anchors in the map.
But I wonder how do they implement it?
Possible manner to implement this:
1)when the map zoom or pan,request feature location data from server,suppose they get the following data(just take the white house for example):
data:{{name:'white house',Latitude:-77 longitude:38}}
2)bind mouse over event to the map div,something like this:
$("#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)bind the click event to the 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 clicking this feature,show the infomation window
//show tip,see the iamge:
}
}
});
The above is what I can thougth until now. But it seems that it is not enough, there are still some problems:
1) The tip can information window can show only if the user click or mouser over the very point which is the same as the Latitude and longitude of the feature,but in google Map,you will find that if the mouse over the marker(at any point of the marker),the tip will show. The area which will cause the tip show is the same as the the area of the marker.
It seems that google do someting like this:
$("#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
}
}
});
But the marder size is not the same,how do they caculate the real area which will make the tip show?
2)in the eventhandle function,I haev to iterator all the features to see if the current mouse's location is match with any of the feature,if the featrues in current map view is so many,so it must cause performance problem.
It is likely an onclick event for the image or the map div. You can put an onclick handler on any DOM element. In this case they probably If they put the event on the map div since there is likely to be a lot of images that would have events and that could be a performance issue.
When you handle the click event for a child element in a parent element it is called event delegation. jQuery provides 2 functions for doing event delegation .live and .delegate. Other libraries also provide this functionality, but you can read about the basics this general javascript turorial or this jQuery specific tutorial.
They are probably doing something like (modified from 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;
}
});
As for making the the image look like an anchor (i.e. the pointer mouse icon), that can be set with css by setting the cursor property:
#map_canvas img { cursor: pointer }
这篇关于如何动态地在图像中添加锚点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
