главная

Теги:


JQuery и Google Maps #1 - Основы

На этот раз я покажу вам ещё одну возможность работы с вашей любимой библиотекой JQuery. А именно - работу с Google Maps. Не волнуйтесь! Всё покажу на пальцах.

Если вы уже имели дело с Google Maps, то можете смело перейти к шагу 5.

Шаг 1. Получение API ключа

Для начала вам необходимо получить API ключ для Google Maps, т.к. он понадобится в следующих шагах.

Шаг 2. Загрузка JQuery и Google Maps

Мы загружаем данные средства с помощью Google AJAX API:

Не забудьте заменить вот эту строку: ВАШ_API_КЛЮЧ на ваш API ключ. Благодаря Google AJAX Libraries API, вы можете загрузить данные JavaScript библиотеки прямо с серверов Google. Это безусловно увеличивает шанс возрастания скорости загрузки библиотек. Дело в том, что библиотеки будут быстрее загружены из кеша браузера пользователя, чем с вашего сервера.

Шаг 3. Создаём Google Карту

Для того, чтобы поместить Google карту на страницу, нам необходимо создать специальный div и применить к нему CSS, чтобы задать width и height.

Чтобы создать карту нужно создать объект класса GMap2. Затем указать координаты центра карты. Я поместил код в контейнер document ready function, а это значит, что он выполнится после полной загрузки страницы.

$(document).ready(function(){ 
  var map = new GMap2(document.getElementById('map')); 
  var burnsvilleMN = new GLatLng(44.797916,-93.278046); 
  map.setCenter(burnsvilleMN, 8); 
});

В данном примере я использовал координаты городка Burnsville. burnsvilleMN получает результат поиска объекта по указанной широте и долготе. Существует много способов получения координат местности и один из них это сервис от iTouchMap.

Второй параметр метода setCenter это уровень масштабирования (zoom) в виде цифры. Я установил его значение в "8" т.к. это примерно среднее из всех возможных.

На данный момент у нас должна отображаться просто карта.

Шаг 4. Реализуем пример с Google Docs

Для того, чтобы нам было с чем работать возьмём пример с документации по Google Maps.

// Нарисуем на карте 10 случайных маркеров (точек)
var bounds = map.getBounds(); 
var southWest = bounds.getSouthWest(); 
var northEast = bounds.getNorthEast(); 
var lngSpan = northEast.lng() - southWest.lng(); 
var latSpan = northEast.lat() - southWest.lat(); 
var markers = []; 
for (var i = 0; i<10; i++) { 
  var point = new GLatLng(southWest.lat() + latSpan * Math.random(), southWest.lng() + lngSpan * Math.random()); 
  marker = new GMarker(point); 
  map.addOverlay(marker); 
  markers[i] = marker; 
}

Обратите внимание на то, что я добавил var markers = []; в этот пример. Данный массив будет использован в дальнейшем.

Шаг 5. Прохождение по маркерам и добавления к ним прослушки события Click

В этом шаге мы наконец будет использовать jQuery и Google Maps вместе. Но мы должны максимум выжать из Google Map’s API, а для jQuery оставить только то, для чего она лучше подойдёт.

Давайте пробежимся по массиву с маркерами при помощи метода each:

$(markers).each(function(i,marker){ 
  GEvent.addListener(marker,"click", function(){ 
    map.panTo(marker.getLatLng()); 
  }); 
});

Внутри цикла мы используем Google Maps GEvent для того, чтобы задать каждому маркеру обработчик события click. Затем мы вызовем метод panTo, передав ему координаты нажатого маркера, для того, чтобы карта сцентрировалась на этом маркере. Координаты маркера мы получаем вот так: marker.getLatLng();

Данный метод возвращает нам ширину и долготу маркера, а map.panTo(GLatLng) центрирует карту по полученным координатам.

Шаг 6. Создание отдельного списка маркеров

Теперь давайте добавим рядом с нашей картой список маркеров. Вставим его в список ul.

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

    Теперь в наш цикл each, давайте вставлять маркеры в список.

    $("
  • ") .html("Точка "+i) .click(function(){ map.panTo(marker.getLatLng()); }) .appendTo("#list");
  • Список будет содержать элементы вида “Точка номер точки”.

    Шаг 7. Добавление сообщения к маркерам

    Обычно, когда я что-то делаю с Google Maps, я стараюсь заменить встроенные фишки на собственные. Благодаря jQuery, мы можем на карту добавить любой HTML вместо окошка с информацией (по умолчанию). Это довольно таки круто, когда ты можешь полностью контролировать отображение своей карты. Добавляем div для текстовой информации.

    Зададим этому текстовому сообщению стиль.

    #message { position:absolute; padding:10px; background:#555; color:#fff; width:75px; }

    Мы хотим, чтобы это сообщение появлялось на самой карте. Для этого будем использовать jQuery. Карты Google это по сути наборы из панелей наложенных друг на друга. Для того, чтобы добраться до того элемента div, к которому мы хотим прикрепить сообщение, мы можем использовать map.getPane(ПАНЕЛЬ). G_MAP_FLOAT_SHADOW_PANE это название панели в которой мы можем писать наши собственные сообщения.

    $("#message").appendTo(map.getPane(G_MAP_FLOAT_SHADOW_PANE));

    Для того, чтобы заменить окно с информацией о маркере (которое стоит по умолчанию) на наше сообщение, нам нужно нужно вынести обработку события click в отдельную функцию. Замените map.panTo(marker.getLatLng(); на displayPoint(marker, i); Вот так это должно получиться:

    function displayPoint(marker, i){ 
      map.panTo(marker.getPoint()); 
      var markerOffset = map.fromLatLngToDivPixel(marker.getPoint());
      $("#message").show().css({ top:markerOffset.y, left:markerOffset.x }); 
    }

    Мы вынесли panTo в новую функцию. Следующая функция themap.fromLatLngToDivPixel(GLatLng); преобразовывает координаты широты и долготы в пиксели для того, чтобы мы могли расположить на карте наш div с сообщением. Функция возвращает объект содержащий x (количество пикселей с левой стороны) и y (количество пикселей сверху). Шаг 8. Последний штрих Чтобы довести дело до конца сделаем так, чтобы сообщение о маркере появлялось тогда, когда заканчивалось движение карты. Для того, чтобы отловить остановку нам необходимо словить событие карты "movend". И после того, как карта прекратила движение, плавно отобразим наше сообщение.

    function displayPoint(marker, index){ 
      $("#message").hide(); 
      var moveEnd = GEvent.addListener(map,"moveend", function(){ 
        var markerOffset = map.fromLatLngToDivPixel(marker.getLatLng()); 
        $("#message") 
          .fadeIn() 
          .css({ top:markerOffset.y, left:markerOffset.x }); 
        GEvent.removeListener(moveEnd); 
      }); 
      map.panTo(marker.getLatLng()); 
    }

    Ну вот и всё! Теперь вы в курсе дела. Мы хорошо потрудились, добавив свой собственный список и собственное окошко с сообщением. Надеемся, вам понравилось!

    Источник урока: www.marcgrabanski.com/articles/jquery-google-maps-tutorial-basics

    Урок Создан:2011-05-12 Просмотров:2115

    Добавить комментарий:

    
    Copyright© 2009 Hosted by Zhost