Блог

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

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

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

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

Здесь видите пункт «14H и F st NW». Я не искал его, но он показывает мне якорь. Когда я нажимаю на нее, она показывает мне соответствующее информационное окно.

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

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

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

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

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

данные:{{название:’white house’, Широта:-77 долгота:38}}

2) привязать событие наведения курсора мыши к div карты, что-то вроде этого:

 $("#map").mousemove(function(e){
 for(var i=0;i<data.length;i  ){
   if(e.clientX=getImageX(data[i].x) amp;amp; 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) amp;amp; 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]) amp;amp; e.clientY=insideTheMarker(data[i])){

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

Но размер шаблона не тот, как они вычисляют реальную область, из-за которой будет отображаться подсказка?

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

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

Когда вы обрабатываете событие click для дочернего элемента в родительском элементе, это называется делегированием события. jQuery предоставляет 2 функции для делегирования событий .живи и .делегировать. Другие библиотеки также предоставляют эту функциональность, но вы можете прочитать об основах в этом общем руководстве по javascript или в этом специальном руководстве по 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, установив свойство cursor:

 #map_canvas img { cursor: pointer }