17 января 2011 г.

картография в вебе

сделал дл http://ivgoradm.ru пример вывода карты Яндекса в блоге:





Установка Яндекс.Карт на свой сайт API средствами + добавляем на Яндекс.Карту маркеры с балунами.
 Если у вас есть сайт и вы хотите разместить на нем карту, то можно воспользоваться Яндекс.Картами и получить на выходе не статическую карту со своими элементами управления, точками и описаниями.
 Сегодня на конкретном примере, который я недавно реализовал при помощи Яндекс.Карт я хотел бы поделиться с вами технологией установки карты средствами JavaScript API, а также навыки работы с геокодером.
 Прежде всего представляю вашему вниманию HTML код страницы с размещенной на ней картой:

   
   
 // Прежде всего подключаем скрипт Карты, в котором после key= вписываем полученный API-ключ: http://api.yandex.ru/maps/form.xml
   
// После этого переходим к построению карты: 



// Добавляем в боди форму для поиска:

     

       
       
   
  // Выводим саму карту:    
   
 

Более подробно читайте на сайте API Яндекс.Карт.
Содержание XML файла с точками:
// Начинаем XML файл:

http://maps.yandex.ru/ymaps/1.x” xmlns:gml=”http://www.opengis.net/gml”>
    http://maps.yandex.ru/representation/1.x”>
       
            MAP
           
               
                    37.8 55.85
                    37.4 55.65
               
           
       
// Создаем стиль для отображения маркера: 
       
   
// Вводим данные и стиль точки: 
   
       
           
                Мойка на “Фрунзенской” Тел. +7(926)8209434
                Мойка
               
                    37.585952 55.726857
               
               
                   
       
   

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


ссылки по теме:

0 коммент.:

Отправить комментарий