Справочник функций

Ваш аккаунт

Войти через: 
Забыли пароль?
Регистрация
Информацию о новых материалах можно получать и без регистрации:

Почтовая рассылка

Подписчиков: -1
Последний выпуск: 19.06.2015

Хороший пример работы с Google Maps API. Ваши маркеры и описание в kml файле

306
03 ноября 2011 года
order.daemon
275 / / 11.05.2007
markers.kml
Код:
<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.google.com/earth/kml/2">
    <Document>
        <name>markers.kml</name>
               
        <Placemark>
            <name>Маркер №1</name>
            <description>
                <![CDATA[
                Описание маркера №1
                ]]>
            </description>
            <Point>
                <coordinates>30.3, 59.94</coordinates>
            </Point>
        </Placemark>
       
        <Placemark>
            <name>Маркер №2</name>
            <description>
                <![CDATA[
                Описание маркера №2
                ]]>
            </description>
            <Point>
                <coordinates>30.35, 59.945</coordinates>
            </Point>
        </Placemark>
       
        <Placemark>
            <name>Маркер №3</name>
            <description>
                <![CDATA[
                Описание маркера №3
                ]]>
            </description>
            <Point>
                <coordinates>30.4, 59.95</coordinates>
            </Point>
        </Placemark>   
    </Document>
</kml>


index.html
Код:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title></title>
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
    function initialize() {
        var myLatlng = new google.maps.LatLng(30.3, 59.94);
        var myOptions = {
            zoom: 4,
            center: myLatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var timestamp = new Date().getTime();
       
        var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);       
        var markersKML = new google.maps.KmlLayer('http://Ваш сайт/markers.kml?' + timestamp);
        markersKML.setMap(map);
    }
</script>
</head>
<body &#111;&#110;load="initialize()">
<div id="map_canvas"></div>
</body>
</html>


Живой пример:
http://goo.gl/Vq5oR

-------------------------------------
KML — это формат представления географических данных для отображения в программах Google Планета Земля, Карты Google и Карты Google для мобильных устройств. Файлы KML позволяют точно обозначать места, накладывать изображения и по-новому отображать данные. KML — международный стандарт, поддерживаемый компанией Open Geospatial Consortium, Inc. (OGC).
-------------------------------------
Как работает KML

Все очень просто:

вы формируете необходимый вам KML файл у себя на сервере;
вы отправляете его через Google Maps API на сервер Google Maps;
Google Maps отображает данные из вашего KML файла на вашей карте.

В итоге ваш KML файл будет выведен поверх тайлов Google Maps, то есть ваши данные будут отображены как изображение поверх карты Гугла. При этом все объекты из KML файла будут кликабельные, и к ним можно будет обращаться. А так как данные «зашиты» в тайлы карт, в DOM вашей карты не будет лишних элементов, и вам не придется переживать о производительности. Вдобавок ко всему, итоговые изображения кешируются и все работает супер быстро.
Реклама на сайте | Обмен ссылками | Ссылки | Экспорт (RSS) | Контакты
Добавить статью | Добавить исходник | Добавить хостинг-провайдера | Добавить сайт в каталог