В заметке «API Google Maps рисуем полилинию и сохраняем ее в базе данных MySQL» я описал процесс создания полилинии и сохранения ее координат в базе данных, здесь я хочу рассказать, как решить подобную задачу с применении ем API Яндекс.Карт.
В первой части я рассмотрю, как можно нарисовать полилинию и вывести координаты ее вершин на 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>
<title>API Яндекс.Карт - рисуем полилинию</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://api-maps.yandex.ru/1.1/index.xml?key=ANpUFEkBAAAAf7jmJwMAHGZHrcKNDsbEqEVjEUtCmufxQMwAAAAAAAAAAAAvVrubVT4btztbduoIgTLAeFILaQ==" type="text/javascript"></script>
<script type="text/javascript">
var polyline
// Создание обработчика для события window.onLoad
YMaps.jQuery(function () {
// Создание экземпляра карты и его привязка к созданному контейнеру
var map = new YMaps.Map(YMaps.jQuery("#YMapsID")[0]);
// Установка для карты ее центра и масштаба
map.setCenter(new YMaps.GeoPoint(43.998779,56.316537), 13);
map.addControl(new YMaps.Zoom());
map.addControl(new YMaps.TypeControl());
map.addControl(new YMaps.ToolBar());
// Создание ломанной
var polyline = new YMaps.Polyline();
// Установка параметров режима редактирования
polyline.setEditingOptions({
drawing: true,
menuManager: function (index, menuItems) {
menuItems.push({
id: "StopEditing",
title: '<span style="white-space:nowrap;">Завершить редактирование<span>',
onClick: function (polyline, pointIndex) {
polyline.stopEditing();
YMaps.jQuery("#coords").attr("value", polyline.getPoints().join('n'));
}
});
return menuItems;
}
});
// Добавление ломаной на карту
map.addOverlay(polyline);
// Включение режима редактирования
polyline.startEditing();
})
</script>
</head>
<body>
<table>
<tr>
<td>
<div id="YMapsID" style="width:800px;height:600px"></div>
</td>
<td valign="top">
<textarea rows="15" cols="35" id="coords" name="coord"></textarea>
</td>
</tr>
</table>
</body>
</html> |
В начале, как всегда, мы производим инициализацию объекта карты и помещаем необходимые элементы управления.
Затем, задаем нашу ломаную строкой
var polyline = new YMaps.Polyline();
После этого задаются параметры для режима редактирования setEditingOptions.
drawing: true — включает режим добавления новых вершин в графическую фигуру.
menuManager — диспетчер контекстного меню, открывающегося при щелчке по вершине графической фигуры (ломаной, многоугольника, и т.п.).
Принимает два аргумента: индекс вершины графической фигуры и массив объектов, описывающих пункты контекстного меню для этой вершины.
Диспетчер может изменять данные в переданном массиве.
Возвращает массив объектов, описывающих пункты контекстного меню.
В это меню мы добавляем свой пункт — Завершить редактирование, по клику по которому вызывается событие StopEditing и редактирование полилинии прекращается.
Там же мы добавили строку
YMaps.jQuery("#coords").attr("value", polyline.getPoints().join(‘n’));
Она помещает координаты вершин полилинии polyline.getPoints() в текстовую область с id="coords".
На этом пока все.
В следующий раз я рассмотрю, как можно сохранить координаты вершин в базе данных MySQL и вывести сохраненные данные на карту.