Когда мы используем Карты Google, после того, как мы что-то ищем, Google добавит маркер на карту. Когда мы нажмем на этот маркер, появится окно с подробной информацией, например:
Я ищу «белый дом», затем создаю маркер «А».
Это несложно. Однако я нашел кое-что более интересное:
В представлении карты, даже если мы ничего не ищем, когда карта приближается к определенному уровню, будут сгенерированы некоторые якоря. Если навести на него мышку или щелкнуть, он что-то покажет соответственно, см. изображение:
Здесь см. точку «14H и F st NW». Я его не искал, но он показал мне якорь. Когда я нажимаю на него, он показывает мне информационное окно соответственно.
Но когда я использую Firebug, чтобы посмотреть, что загружается, я обнаружил, что это просто изображения. Я не могу найти тег <a> в HTML.
Кроме того, через 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 вы обнаружите, что если наведите указатель мыши на маркер (в любая точка маркера), кончик покажет. Область, в которой будет отображаться наконечник, такая же, как и область маркера.
Кажется, что 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
}
}
});
Но размер мардера не тот, как они рассчитывают реальную площадь, на которой будет отображаться наконечник?
2) в функции обработчика событий я перехожу к итератору всех функций, чтобы увидеть, соответствует ли текущее местоположение мыши какой-либо функции, если функций в текущем представлении карты так много, что это должно вызвать проблемы с производительностью.
