3. Порядок выполнения работы
Интеграция карт с YandexMap
Используя картографическую базу данных Yandex, написать код для веб-приложения.
Создать текстовый документ (блокнот) формата .txt, где будет код программы:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv = “Content-Type” content= “text/html; charset=utf-8” />
<title>YandexMap Example</title>
</head>
<body>
<!-- задаем стиль и разметку страницы. -->
<div id=“map” style=“width:800px; height:600px”></div>
</body>
</html>
Следующий шаг, написание кода создания карты внутри тега <Head>:
<!--
Подключаем API карт
Параметры:
-load=package.standart - основные компоненты;
-lang=ru-Ru - язык русский.
-->
<script src = “http://api-maps.yandex.ru/2.0/?load=package.standart&lang=ru-RU” type=“text/javascript”> </script> <script type=“text/javascript”>
Var myMap;
//Дождемся загрузки API и готовности DOM.
ymaps.ready(init);
function init () {
//Создание экземпляра карты и его привязка
//к контейнеру с заданным id(“map”).
myMap = new ymaps.Map(‘map’,{
//При инициализации карты обязательно нужно //указать ее центр и коэффициент //масштабирования.
center:[55.76, 37.64], //Москва
zoom:10
});
} </script>
Далее, необходимо сохранить текстовый документ в формате .html и открыть его с помощью ве-бразера. В результате должна открыться карта (рис. 2.1).
Рис. 2.1. Созданная карта
Добавление пользовательского интерфейса (код следует писать внутри тега <Head>):
<script type = “text/javascript”>
ymaps.ready(){
//Для добавления элемента управления на
//карту используется поле map.controls.
//Это поле содержит ссылку на экземпляр
//класса map.control.Manager.
//Добавление элемента в коллекцию производится
//с помощью метода add.
//В метод add можно передать строковый //идентификатор элемента управления и
//его параметры.
myMap.controls
//Кнопка изменения масштаба
.add(‘zoomControl’, { left: 5, top: 5})
//Список типов карты
.add(‘typeSelector’)
//Стандартный набор кнопок
.add(‘mapTools’, {left: 35, top: 5});
//Также в метод add можно передать
//экземпляр класса элемента управления.
//Например, панель управления пробками.
var trafficControl = new ymaps.control.TrafficControl();
myMap.Controls
.add(trafficControl)
//В конструкторе элемента управления
//можно задавать расширенные параметры,
//например, тип карты в обзорной карте.
.add(new ymaps.MiniMap({
type: ‘yandex#publicMap’
}));}
В результате, приложение примет следующий вид, как показано на рисунке 2.2.
Рис. 2.2. Конечный вид карты
Интеграция карт с 2gis
Используя картографическую базу данных 2GIS, необходимо написать код для веб-приложения.
Для этого создается текстовый документ (блокнот) формата .txt, где будет код программы:
<!DOCTYPE html>
<html>
<head>
<title>2GIS Example</title>
</head>
<body>
<div id = “myMapId” style = “width: 500 px; height: 400 px”></div>
</body>
</html>
Далее, пишется код создания карты внутри тега <Head>:
<script type = “text/javascript” src = “http://maps.api.2gis.ru/1.0”> </script>
<script type = “text/javascript”>
//Создаем обработчик загрузки страницы:
DG.autoload(function(){
//Создаем объект карты,
//связанный с контейнером:
var myMap = new DG.Map(‘myMapId’);
//Устанавливаем центр карты и
//коэффициент масштабирования:
myMap.setCenter ( new DG.GeoPoint
(82.927810142519, 55.028936234826), 15);
}); </script>
и сохраняется текстовый документ в формате .html (рис. 2.3).
Рис. 2.3. Созданная карта
Код добавления пользовательского интерфейса (внутри тега <Head>, сам код должен быть написан внутри тега <script>):
//Добавляем элементуправления с
//коэффициентом масштабирования:
myMap.Controls.add(new DG.Controls.Zoom());
//Создаем балун:
var myBalloon = new DG.Balloons.Common({
//Местоположение на которое указывает балун:
geoPoint: new DG.GeoPoint(82.927810142519, 55.028936234826),
//Устанавливаем текст, который будет отображаться
//при открытии балуна:
contentHtml: ‘Привет!<br>Вы кликнули по мне:)’
});
//Создаем маркер:
var myMarker = new DG.Markers.Common({
//Местоположение на которое указывает маркер:
geoPoint: new DG.GeoPoint(82.927810142519, 55.028936234826),
//Функция, вызываемая при клике по маркеру:
clickCallback: function() {
//Если балун еще не был добавлен на карту,
//добавляем его:
if(! myMap.balloons.getDefaultGroup().contains(myBalloon)){
myMap.balloons.add(myBalloon);
} else {
//Показываем уже ранее добавленный
//на карту балун
myBalloon.show(); }
}
});
//Добавить маркер на карту:
myMap.markers.add(myMarker);
Конечный вид карты приведен на рисунке 2.4.
Р
ис.
2.4.
Конечный вид карты