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

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

 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 мы расширяем, чтобы включить каждый маркер. Таким образом, независимо от того, где карта была увеличена или панорамирована, она всегда вернется к идеальному уровню масштабирования, который включает все наши маркеры.

Теперь, когда наш код готов, давайте приведем его в действие. Мы будем использовать jQuery $('document').ready чтобы дождаться загрузки страницы, а затем инициализировать карту, указав ее на элемент страницы с id map используя строку селектора #map :

 $ (документ) .ready (function () {
   $ ( "# Карта"). CSS ({
     высота: 500,
     ширина: 600
   });
   var myLatLng = new google.maps.LatLng (17.74033553, 83.25067267);
   MYMAP.init ('# map', myLatLng, 11);
     $ ( "# Showmarkers"). Нажмите (функция (е) {
     MYMAP.placeMarkers ( 'markers.xml');
   });
 });

Мы также прикрепляем прослушиватель события click к кнопке #showmarkers . Когда эта кнопка нажата, мы вызываем нашу функцию placeMarkers с URL-адресом нашего XML-файла. Дайте ему вращение, и вы увидите набор пользовательских маркеров, отображаемых на карте.

Вы, наверное, догадались, что API Карт Google — это намного больше, чем то, что мы рассмотрели здесь, поэтому обязательно ознакомьтесь с документацией, чтобы почувствовать все, что возможно.