Опубликован: 09.06.2009 | Доступ: свободный | Студентов: 6054 / 2777 | Оценка: 4.52 / 4.43 | Длительность: 05:45:00
Специальности: Менеджер
Лекция 3:

Создание сайта

Генерируются два варианта кода - для интерактивной и статической карт ( рис. 3.40):

Готовый код для вставки

увеличить изображение
Рис. 3.40. Готовый код для вставки

Он уже автоматически содержит API-ключ, который мы получали ранее, так что пока нам его не пришлось использовать вручную. Копируем код для динамической карты, который состоит из двух частей:

<!-- Этот блок кода вставляется в тег <HEAD> (начало) -->
<script src="http://api-maps.yandex.ru/1.0/
?key=AJYdDUoBAAAAf5hmMAMA2PMJnPGzEq44-gA1uwd77mHo1zsAAAAAAAAAAAAmmT_ZT2pY0QPvuWRIUoVc05A-2g==&wizard=constructor" 
type="text/javascript"></script>
<script type="text/javascript">
    window.onload = function () {
        var map = new YMaps.Map(document.getElementById("YMapsID"));
        map.setCenter(new YMaps.GeoPoint(39.234738,51.641178), 15, YMaps.MapType.SATELLITE);
        map.addControl(new YMaps.Zoom());
        map.addControl(new YMaps.ToolBar());
        map.addControl(new YMaps.TypeControl());        
        var s = new YMaps.Style();
        s.iconStyle = new YMaps.IconStyle();
        s.iconStyle.offset = new YMaps.Point(-8,-27);
        s.iconStyle.href = "http://api-maps.yandex.ru/i/0.2/placemarks/pmlbm.png";
        s.iconStyle.size = new YMaps.Point(28,29);
        YMaps.Styles.add("wizard#lbmPoint", s);

        
        var placemark1 = new YMaps.Placemark(new YMaps.GeoPoint(39.241385,51.640591), 
         {style: "wizard#lbmPoint", balloonOptions: {maxWidth: 300}});
        map.addOverlay(placemark1);
        placemark1.setBalloonContent("Парк Авиастроителей");        
    }
</script>
<!-- Этот блок кода вставляется в тег <HEAD> (конец) -->

<!-- Этот блок кода нужно вставить в ту часть страницы, где вы хотите разместить карту (начало) -->
<div id="YMapsID" style="width:600px;height:450px"></div>
<div style="width:600px;text-align:right;font-family:Arial">
  <a href="http://api.yandex.ru/maps/tools/constructor/" 
 style="color:#1A3DC1">Создано с помощью инструментов Яндекс.Карт</a></div>
<!-- Этот блок кода нужно вставить в ту часть страницы, где вы хотите разместить карту (конец) -->

Комментарии вполне ясно указывают, что куда будет нужно вставлять. Идем в Мастерскую, открываем страницу управления файлами, выбираем редактирование страницы, для которой была получена карта ( рис. 3.41):

Переход к редактированию страницы для вставки кода карты

Рис. 3.41. Переход к редактированию страницы для вставки кода карты

Полностью HTML-код страницы "park_aviastroiteley.html" теперь будет выглядеть так:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html" />
<title>Парк Авиастроителей </title>
<meta name="keywords" content="Парк Авиастроителей, Воронеж, Фотографии парка Авиастроителей в Воронеже, 
  деревенные фигуры, деревянная скульптура." />
<meta name="description" content="Фотографии деревянных скульптур воронежского парка Авиастроителей
  в высоком разрешении." />
<link href="style.css" rel="stylesheet" type="text/css" />


<!-- Этот блок кода вставляется в тег <HEAD> (начало) -->
<script src="http://api-maps.yandex.ru/1.0/
?key=AJYdDUoBAAAAf5hmMAMA2PMJnPGzEq44-gA1uwd77mHo1zsAAAAAAAAAAAAmmT_ZT2pY0QPvuWRIUoVc05A-2g==&wizard=constructor" 
type="text/javascript"></script>
<script type="text/javascript">
    window.onload = function () {
        var map = new YMaps.Map(document.getElementById("YMapsID"));
        map.setCenter(new YMaps.GeoPoint(39.234738,51.641178), 15, YMaps.MapType.SATELLITE);
        map.addControl(new YMaps.Zoom());
        map.addControl(new YMaps.ToolBar());
        map.addControl(new YMaps.TypeControl());        
        var s = new YMaps.Style();
        s.iconStyle = new YMaps.IconStyle();
        s.iconStyle.offset = new YMaps.Point(-8,-27);
        s.iconStyle.href = "http://api-maps.yandex.ru/i/0.2/placemarks/pmlbm.png";
        s.iconStyle.size = new YMaps.Point(28,29);
        YMaps.Styles.add("wizard#lbmPoint", s);

        
        var placemark1 = new YMaps.Placemark(new YMaps.GeoPoint(39.241385,51.640591),
         {style: "wizard#lbmPoint", balloonOptions: {maxWidth: 300}});
        map.addOverlay(placemark1);
        placemark1.setBalloonContent("Парк Авиастроителей");        
    }
</script>
<!-- Этот блок кода вставляется в тег <HEAD> (конец) -->



</head>

<body>
<div class="content">
Парк Авиастроителей - небольшой и уютный парк, в котором понадобилось однажды спилить старые деревья. 
 Ничего необычного, стандартная задача.
<p><a href="images_full/park13.jpg"><img src="images/park13.jpg" width="806" height="1075" border="0px"/></a>
</p>
<p>Но как были спилены эти деревья! Теперь пеньки - немного доработанные скульпторами,
  стали совершенно самостоятельными украшениями парка.</p>
<p><a href="images_full/park14.jpg"><img src="images/park14.jpg" width="806" height="1075" border="0px"/></a></p>
<p>Их много и они разные. Сова и панда, который залез на дерево.</p>
<p><a href="images_full/muzey15.jpg"><img src="images/park15.jpg" width="1075" height="806" border="0px"/></a></p>

<p><a href="images_full/park10.jpg"><img src="images/park10.jpg" width="806" height="1075" border="0px"/></a></p>
<p>И панда, и дерево представляют собой один ствол дерева.</p>
<p><a href="images_full/park11.JPG"><img src="images/park11.jpg" width="1075" height="806" border="0px"/></a></p>
<p><a href="images_full/park12.jpg"><img src="images/park12.jpg" width="806" height="1075" /></a></p>
<p>Небольшие пеньки.</p>
<p><a href="images_full/park16.JPG"><img src="images/park16.jpg" width="1075" height="806" border="0px"/></a></p>
<p>И большие.</p>
<p><a href="images_full/park17.jpg"><img src="images/park17.jpg" width="806" height="1075" border="0px"/></a></p>
<p>Знакомые персонажи сказок.</p>
<p><a href="images_full/park18.jpg"><img src="images/park18.jpg" width="806" height="1075" border="0px"/></a></p>
<p><a href="images_full/park19.jpg"><img src="images/park19.jpg" width="806" height="1075" border="0px"/></a></p>
<p><a href="images_full/park.JPG"><img src="images/park.jpg" width="1075" height="806" /></a></p>
<p><a href="images_full/park3.JPG"><img src="images/park3.jpg" width="1075" height="806" border="0px"/></a></p>
<p><a href="images_full/park8.jpg"><img src="images/park8.jpg" width="806" height="1075" border="0px"/></a></p>
<p><a href="images_full/park7.jpg"><img src="images/park7.jpg" width="806" height="1075" border="0px"/></a></p>
<p><a href="images_full/park2.jpg"><img src="images/park2.jpg" width="806" height="1075" border="0px"/></a></p>
<p><a href="images_full/park4.JPG"><img src="images/park4.jpg" width="1075" height="806" border="0px"/></a></p>
<p><a href="images_full/park5.jpg"><img src="images/park5.jpg" width="806" height="1075" border="0px"/></a></p>
<p><a href="images_full/park6.JPG"><img src="images/park6.jpg" width="1075" height="806" border="0px"/></a></p>
<p><a href="images_full/park9.jpg"><img src="images/park9.jpg" width="806" height="1075" border="0px"/></a></p>
<p>Более подробную информацию о парке Авиастроителей можно найти в Базе Знаний Черноземья
<a href="http://www.chernozemye.ru/index.php5/Парк_Авиастроителей">
 http://www.chernozemye.ru/index.php5/Парк_Авиастроителей</a></p>

<!-- Этот блок кода нужно вставить в ту часть страницы, где вы хотите разместить карту (начало) -->
<div id="YMapsID" style="width:600px;height:450px"></div>
<div style="width:600px;text-align:right;font-family:Arial">
 <a href="http://api.yandex.ru/maps/tools/constructor/" 
style="color:#1A3DC1">Создано с помощью инструментов Яндекс.Карт</a></div>
<!-- Этот блок кода нужно вставить в ту часть страницы, где вы хотите разместить карту (конец) -->


<p><a href="index.html">На главную</a></p>
</div>
</body>
</html>
Листинг .

Сохраняем изменения, открываем в браузере страницу сайта http://v-rn.narod.ru/park_aviastroiteley.html и видим, что добавилась карта со всеми инструментами. По-прежнему доступно изменение масштаба, отображение смежных участков, а также инструменты, например, линейка ( рис. 3.42):

Готовая интерактивная карта на сайте

увеличить изображение
Рис. 3.42. Готовая интерактивная карта на сайте

Таким же образом мы расставляем метки и подписи для других страниц сайта, получаем код для вставки и внедряем его.

При работе с Конструктором схем проезда возникает вопрос - а можно ли вообще, получать код для вставки карт безо всяких API? Скажем, есть обычные карты http://maps.yandex.ru/, допускается ли внедрение какого-то либо участка без всяких ключей? К сожалению, на момент написания курса это невозможно.

Егор Скрипко
Егор Скрипко

К сожалению, многие фишки Ядекса перечисенные в этом курсе больше не поддерживаются. Курс морально устарел.

Анна Давыдько
Анна Давыдько

невозможно будет сдать тест,видимо данные устарели. яндес народ переехал на uCoz..там все платно и по-другому