Статьи

Добавление маркеров на карту с помощью API Карт Google и статьи jQuery

API Карт Google предоставляет изощренный способ для разработчиков и веб-мастеров добавлять пользовательские интерактивные карты на свои веб-сайты. Версия 3 API, выпущенная в мае 2009 года, представляет собой полный пересмотр API в ответ на несколько лет отзывов пользователей о предыдущей версии.

В этом уроке мы рассмотрим некоторые из простых функций API, показывая, как добавить карту с набором маркеров местоположения на веб-сайт. С каждым маркером будет связан информационный пузырь с названием и адресом местоположения. Более того, мы будем загружать данные о местоположении через Ajax, поэтому это можно использовать в качестве первого шага на пути к разработке более сложного приложения на основе карт.

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

Прежде чем мы начнем, вы должны иметь хотя бы базовые знания о jQuery. Чтобы узнать больше о любых классах и методах, которые мы будем использовать, вы можете обратиться к справочнику API Карт Google .

В этом уроке мы собираемся создать:

  • HTML-файл markers.html , который будет использоваться для отображения карты и маркеров.

  • XML-файл markers.xml , содержащий данные, заключенные в теги name , address , lat и lng

  • файл JavaScript с именем markers.js , куда мы поместим код для загрузки данных и создадим карту

Вы можете скачать полный исходный код здесь, чтобы следовать.

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

Координаты и информация для каждого маркера, который мы хотим разместить на нашей карте, будут содержаться в файле XML. Это облегчает его изменение или автоматическое создание сценарием на стороне сервера, извлекающим информацию из базы данных. XML форматируется следующим образом:

  <? xml version = "1.0"?> <маркеры>
   <Маркер>
     <Имя> VODAFONE </ имя>
     <адрес> рядом с рестораном Гумахумалу, Маррипалем, Висакхапатнам </ address>
     <Ш> 17.74033553 </ ш>
     <LNG> 83.25067267 </ LNG>
   </ Маркер>
   <Маркер>
     <Имя> VODAFONE </ имя>
     <адрес> возле школы Вишва Теджа, Татичетлапалем, Вишакхапатнам </ address>
     <Ш> 17.73254774 </ ш>
     <LNG> 83.29195094 </ LNG>
   </ Маркер>
  
 </ Маркеры>

Корневым элементом являются markers , и он содержит ряд элементов marker , каждый из которых содержит текстовый адрес, широту и долготу.

Прежде чем мы сможем загрузить этот XML и использовать его для размещения маркеров на нашей карте, нам сначала нужно включить JavaScript Google Maps и библиотеку jQuery на нашу HTML-страницу.

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

  <script type = "text / javascript" src = "js / jquery-1.4.1.min.js"> </ script> 

Для кода Google Maps мы можем связать напрямую с серверами Google:

  <script type = "text / javascript" src = "http://maps.google.com/maps/api/js?sensor=false"> </ script> 

Параметр sensor=false указывает, что мы не хотим использовать датчик (например, локатор GPS) для определения местоположения пользователя.

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

Давайте начнем со скелета нашего кода карты:

 var MYMAP = {
   границы: ноль,
   карта: ноль
 }
 MYMAP.init = function (latLng, селектор) {
  
 }
 MYMAP.placeMarkers = function (filename) {
  
 }

Мы упаковываем все функциональные возможности нашей карты в объект JavaScript, называемый MYMAP , который поможет избежать потенциальных конфликтов с другими сценариями на странице. Объект содержит две переменные и две функции. В переменной map будет храниться ссылка на объект Google Map, который мы создадим, а в переменной bounds будет храниться ограничивающий прямоугольник, содержащий все наши маркеры. Это будет полезно после добавления всех маркеров, когда мы хотим увеличить карту таким образом, чтобы все они были видны одновременно.

Теперь о методах: init найдет элемент на странице и инициализирует его как новую карту Google с заданным центром и уровнем масштабирования. placeMarkers временем placeMarkers берет имя XML-файла и загружает данные координат из этого файла, чтобы разместить серию маркеров на карте.

Теперь, когда у нас есть базовая структура, давайте напишем нашу функцию init :

 MYMAP.init = function (selector, latLng, zoom) {
   var myOptions = {
     масштаб: масштаб,
     центр: широта,
     mapTypeId: google.maps.MapTypeId.ROADMAP
   }
   this.map = new google.maps.Map ($ (селектор) [0], myOptions);
   this.bounds = new google.maps.LatLngBounds ();}

Мы создаем литерал объекта, содержащий набор параметров, используя параметры, переданные методу. Затем мы инициализируем два объекта, определенных в API Карт Google – Map и LatLngBounds – и назначаем их свойствам нашего объекта MYMAP который мы установили ранее для этой цели.

В конструктор Map передается элемент DOM для использования в качестве карты на странице, а также набор параметров. Опции, которые мы уже подготовили, но для извлечения элемента DOM нам нужно взять переданную строку селектора и использовать функцию $ jQuery, чтобы найти элемент на странице. Так как $ возвращает объект jQuery, а не необработанный узел DOM, нам необходимо выполнить детализацию с помощью [0] : это позволяет нам получить доступ к «голому» узлу DOM.

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

Говоря об этом, давайте посмотрим на функцию placeMarkers :

 MYMAP.placeMarkers = function (filename) {
   $ .get (имя файла, функция (xml) {
     $ (XML) .find ( "маркер"). Каждая (функция () {
       var name = $ (this) .find ('name'). text ();
       var address = $ (this) .find ('address'). text ();
      
       // создаем новую точку LatLng для маркера
       var lat = $ (this) .find ('lat'). text ();
       var lng = $ (this) .find ('lng'). text ();
       var point = new google.maps.LatLng (parseFloat (lat), parseFloat (lng));
      
       // расширяем границы, чтобы включить новую точку
       MYMAP.bounds.extend (точка);

       // добавляем маркер сам
       var marker = new google.maps.Marker ({
         положение: точка,
         карта: MYMAP.map
       });

       // создаем подсказку и ее текст
       var infoWindow = new google.maps.InfoWindow ();
       var html = '<b>' + name + '</ b> <br />' + address;

       // добавляем слушателя, чтобы открыть подсказку, когда пользователь нажимает на один из маркеров
       google.maps.event.addListener (маркер, «щелчок», функция () {
         infoWindow.setContent (HTML);
         infoWindow.open (MYMAP.map, маркер);
       });
     });
    
     // Размещаем карту вокруг маркеров, которые мы добавили:
     MYMAP.map.fitBounds (MYMAP.bounds);
   });
 }

Эта функция немного сложнее, но ее легко понять. Сначала мы вызываем метод $.get jQuery для выполнения AJAX-запроса. Метод принимает два параметра: URL-адрес для запроса (в нашем случае это наш локальный XML-файл) и функцию обратного вызова, которая выполняется после завершения запроса. Эта функция, в свою очередь, будет передавать ответ на запрос, который в этом случае будет нашим XML.

jQuery обрабатывает XML точно так же, как HTML, поэтому мы можем использовать $(xml).find('marker').each( … ) чтобы $(xml).find('marker').each( … ) каждый элемент маркера в XML-ответе и создать маркер на карте для каждого из них.

Мы берем имя и адрес маркеров, затем создаем новый объект LatLng для каждого из них, который мы присваиваем point переменной. Мы расширяем ограничивающий прямоугольник, чтобы включить эту точку, а затем создаем маркер в этом месте на карте.

Мы хотим, чтобы всплывающая подсказка появлялась всякий раз, когда пользователь нажимает на эти маркеры, и мы хотим, чтобы она содержала имя и адрес нашего местоположения. Следовательно, нам нужно добавить прослушиватель событий для каждого маркера с помощью метода API event.addListener . Прежде чем мы сделаем это, мы создадим саму подсказку. В Google Maps API этот тип всплывающей подсказки называется InfoWindow . Поэтому мы создаем новое InfoWindow , а также настраиваем некоторый HTML- InfoWindow , чтобы заполнить его необходимой информацией. Затем мы добавляем наш слушатель события. Слушатель будет срабатывать при каждом нажатии на один из маркеров, и оба будут устанавливать содержимое информационного InfoWindow и открывать его, чтобы оно было видно на карте.

Наконец, после добавления всех маркеров и связанных с ними обработчиков событий и InfoWindows , мы подгоняем карту к маркерам с помощью метода fitBounds API-интерфейса fitBounds . Все, что нам нужно передать – это объект bounds мы расширяем, чтобы включить каждый маркер. Таким образом, независимо от того, где карта была увеличена или панорамирована, она всегда вернется к идеальному уровню масштабирования, который включает все наши маркеры.

Если вам понравилось читать этот пост, вы полюбите Learnable ; место, чтобы узнать новые навыки и приемы у мастеров. Участники получают мгновенный доступ ко всем электронным книгам и интерактивным онлайн-курсам SitePoint, таким как основы jQuery .