Как добавить якорь в изображение динамически

Question

Когда мы используем Google Maps, после того, как мы что-то ищем, Google добавит маркер на карту.Когда мы нажмем на этот маркер, появится окно с подробной информацией, вот так:

Я ищу «белый дом», затем создаю маркер «A».

Это не сложно.Однако я нашел кое-что более интересное:

В представлении карты, даже если мы ничего не ищем, при увеличении карты до некоторого заданного уровня будут сгенерированы некоторые привязки.Если навести указатель мыши на него или щелкнуть по нему, то он отобразит что-то соответственно, см. Изображение:

Здесь см. Пункт "14H и F-й СЗ".Я не искал это, но это показывает мне якорь.Когда я нажимаю на него, он соответственно отображает информационное окно.

Но когда я использую Firebug, чтобы увидеть, что загружается, я обнаружил, что это всего лишь изображения.Я не могу найти какой-либо тег <a> в HTML.

Кроме того, через Firebug я обнаружил, что при изменении уровня карты браузер отправит запрос на сервер, чтобы получить функции внутри текущего представления карты.,Ответ в формате JSON.Он содержит расположение и название объектов, затем он добавляет якоря на карту.

Но мне интересно, как они это реализуют?

Возможный способ реализовать это:

1) когда масштаб карты или панорамирование запрашивают данные о местоположении объектов с сервера, предположим, что они получают следующие данные (например, просто возьмите Белый дом):

data: {{name: 'white house', Latitude: -77 longitude: 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) привязать событие click к карте 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 вы увидитеобнаружение, что если навести указатель мыши на маркер (в любой точке маркера), будет показан наконечник. Область, которая вызовет показ наконечника, будет такой же, как область маркера.

Кажется, чтоGoogle сделать что-то вроде этого:

$("#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не то же самое, как они вычисляют реальную область, которая будет показывать подсказку?

2) в функции дескриптора события, я должен перебрать все функции, чтобы увидеть, совпадает ли текущая позиция мыши с любой изэта функция, если в текущем представлении карты указано так много функций, должна вызывать проблемы с производительностью.

Answer 1

Вероятно, это событие onclick для изображения или карты.Вы можете поместить обработчик onclick на любой элемент DOM.В этом случае они, вероятно, если они помещают событие в карту div, так как, вероятно, будет много изображений, которые будут иметь события, и это может быть проблемой производительности.

Когда вы обрабатываете событие click для дочернего элемента в родительском элементе, это называется делегированием события.jQuery предоставляет 2 функции для делегирования событий .live и .delegate .Другие библиотеки также предоставляют эту функциональность, но вы можете прочитать об основах этого общего javascript turorial или этого jQuery-специфического учебного пособия .

Они, вероятно, делают что-то вроде (модифицированныйиз здесь ):

// 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 }