Интерактивные внутри карты плитки Google Map

Question

Я задал этот вопрос в stackoverflow, однако я не получил окончательный ответ, что я хотел.

Так что я хочу опубликовать это снова и дать более подробную информацию.

Оригинальный пост может быть найден здесь

Когда курсор над объектом на плитке карты (img), курсор изменится на «указатель», и вы сможете щелкнуть нужное место, после чего откроется окно с информацией. Это то, что я имею в виду под «интерактивным».

По моему мнению, когда мы перетаскиваем или увеличиваем карту, Google отправит запрос на сервер, чтобы получить функции внутри текущего вида карты. Затем, когда мышь перемещается внутри границы одного объекта, эффект будет иметь место.

Но что меня удивляет, так это как это может быть так точно?

Возьмите эту плитку как exmaple:

Область функции «Ридли ....» не является обычным прямоугольником, если ваша мышь не находится в области этой функции, курсор не изменится.

Но как только ваша мышь окажется в нужном месте (внутри области этой функции), эффект проявится, проверьте следующее:

Поскольку положение мыши находится точно внутри области объекта, я могу щелкнуть ее и получить информационное окно.

Я просто хочу знать, как это реализовать?

Обновление:

Эффект проявляется только при наведении курсора мыши на определенную область:

Эффект получается только в том случае, если мышь перемещается внутри выделенной области прямоугольника, очень точно.

Answer 1

При этом используется JavaScript, и фактический отображаемый контент уже заполняется с доступного сервера в элемент div с свойством display none style. Каждое изображение 256 x 256 с уровнем увеличения 16 содержит информацию о x и y, а также о сервере. При просмотре карт Google используйте Firebug, чтобы посмотреть, что меняет код, и вы увидите много элементов div с классом «css-3d-bug-fix-hack» внизу списка изображений. Один из этих элементов будет иметь детей. Первый ребенок скрыт. Просто снимите показ с этого ребенка, и он появится.

Чтобы реализовать такую ​​функциональность, вам нужно знать, как получить позицию курсора, используя javascript, как узнать, находится ли курсор в элементе div, используя javascript, или вы можете использовать селекторы JQuery для проверки текущего элемента наведения определенного типа. Вы также должны понимать абсолютное позиционирование в CSS. Затем используйте javascript, чтобы скрыть и показать элементы в позиции cusrsor.

Answer 2

Объект google.maps.Marker может прослушивать следующие пользовательские события, например:

'click' 'dblclick' 'mouseup' 'mousedown' 'mouseover' 'mouseout'

http://code.google.com/apis/maps/documentation/javascript/events.html

GoogleMap использует InfoWindows для наложения описания данных на Маркер.

InfoWindows отображает содержимое в плавающем окне над картой.Информационное окно выглядит как воздушный шарик из комиксов;у него есть область содержимого и конический стебель, где кончик стебля находится в указанном месте на карте.Вы можете увидеть информационное окно в действии, щелкнув бизнес-маркеры на Картах Google.Конструктор InfoWindow принимает объект параметров InfoWindow, который задает набор начальных параметров для отображения информационного окна.После создания информационное окно не добавляется на карту.Чтобы сделать информационное окно видимым, вам нужно вызвать метод open () в InfoWindow, передать ему карту, на которой нужно открыть, и, необязательно, маркер, с помощью которого его можно привязать.(Если маркер не указан, информационное окно откроется в его свойстве position.)

http://code.google.com/apis/maps/documentation/javascript/overlays.html#InfoWindows

Создайте маркер и прикрепите информационное окно с событием наведения мыши

var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var myOptions = {
  zoom: 4,
  center: myLatlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
}

var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

var contentString = '<div id="content">'+
    '<div id="siteNotice">'+
    '</div>'+
    '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
    '<div id="bodyContent">'+
    '<p><b>Uluru</b>, Test 
    '</div>'+
    '</div>';

var infowindow = new google.maps.InfoWindow({
    content: contentString
});

var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    title:"Uluru (Ayers Rock)"
});

google.maps.event.addListener(marker, 'mouseover', function() {
  infowindow.open(map,marker);
});

EDITED после просмотра вашего комментария

Карты Google широко используют JavaScript.Когда пользователь перетаскивает карту, квадраты сетки загружаются с сервера и вставляются на страницу.Когда пользователь ищет бизнес, результаты загружаются в фоновом режиме для вставки в боковую панель и карту;страница не перезагружается.Местоположения отображаются динамически путем размещения красной булавки (состоящей из нескольких частично прозрачных PNG) поверх изображений карты.

Используется скрытый IFrame с отправкой формы, поскольку он сохраняет историю браузера.Сайт также использует JSON для передачи данных, а не XML, из соображений производительности.Оба эти метода попадают под широкий зонтик Ajax.[Из Википедии]

Answer 3

Возможно, они используют тег AREA на основе многоугольника: http://www.w3.org/TR/html4/struct/objects.html#edef-AREA?

По определению, эти теги не обязательно должны быть прямоугольниками. Они могут использовать что-то вроде <area shape='poly' coords='...'>, где координаты могут быть настолько точными, насколько они хотят.

ОБНОВЛЕНИЕ : У меня не было возможности проверить http://maps.google.com перед ответом, но теперь я могу сказать, что они не используют карты изображений, и поэтому функциональность не основана на AREA метках. Однако, если вы хотите использовать функции наложения непрямоугольной карты изображений, мой первоначальный ответ остается прежним.