С этой заметки я начну рассказ о том, как можно организовать рисование полилинии на карте с использованием API Google Maps, а затем сохранить ее в базе данных MySQL для дальнейшего использования.
В этой заметке я расскажу, как можно создать полилинию.
Последовательно щелкая левой кнопкой мыши по карте, мы формируем полилинию красного цвета с маркерами в узловых точках.
Если щелкнуть по маркеру в любом из промежуточных узлов, то он удаляется и соседние маркеры, соединяются прямой.
Если щелкнуть по последнему маркеру, то кроме него удаляется и последний сегмент полилинии.
Приведу Вам исходный код, а затем дам к нему пояснение.
Исходный код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>API Google Maps рисуем полилинии</title>
<style type="text/css">
v:* { /* Only for IE */
behavior:url(#default#VML);
}
body { height: 600px; }
#map { position: absolute;
top: 50px;
left: 15px;
width: 550px;
height: 400px;
}
#descr { position: absolute;
left: 580px;
top: 50px;
margin-right: 40px;
}
.tooltip {
text-align: center;
opacity: .70;
-moz-opacity:.70;
filter:Alpha(opacity=70);
white-space: nowrap;
margin: 0;
padding: 2px 0.5ex;
border: 1px solid #000;
font-weight: bold;
font-size: 9pt;
font-family: Verdana;
background-color: #fff;
}
</style>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAACHCJdlgAEGcD_flKUFEmVhQlAYd20Yeej0MiKNuYPUGBnCwDThQlwUCPtCqtX3RC7LUKE-JYan3T4g"
type="text/javascript"></script>
</head>
<body onload="buildMap()" onunload="GUnload()">
<div id="map"></div>
<div id="descr">Нажмите на карту, чтобы установить маркеры в узлах полилинии.<br>
Чтобы удалить существующий маркер, нажмите на маркер снова.
<p><a href="#" onclick="showPoints()">Сохранить линию</a></p>
<div id="route"><p><strong>Координаты вершин полилинии:</strong></p></div>
</div>
<script type="text/javascript">
//<![CDATA[
// Глобальные переменные
var mapdiv = document.getElementById("map");
var map;
var polylines = new Array();
var count = 0;
var points = new Array();
var markers = new Array();
var icon_url ="http://labs.google.com/ridefinder/images/";
var tooltip;
function addIcon(icon) { // Определяем значки для маркеров
icon.shadow= icon_url + "mm_20_shadow.png";
icon.iconSize = new GSize(12, 20);
icon.shadowSize = new GSize(22, 20);
icon.iconAnchor = new GPoint(6, 20);
icon.infoWindowAnchor = new GPoint(5, 1);
}
function showTooltip(marker) { // показываем подсказки (tooltip)
tooltip.innerHTML = marker.tooltip;
tooltip.style.display = "block";
// Tooltip transparency specially for IE
if(typeof(tooltip.style.filter) == "string") {
tooltip.style.filter = "alpha(opacity:70)";
}
var currtype = map.getCurrentMapType().getProjection();
var point= currtype.fromLatLngToPixel(map.fromDivPixelToLatLng(new GPoint(0,0),true),map.getZoom());
var offset= currtype.fromLatLngToPixel(marker.getLatLng(),map.getZoom());
var anchor = marker.getIcon().iconAnchor;
var width = marker.getIcon().iconSize.width + 6;
// var height = tooltip.clientHeight +18;
var height = 10;
var pos = new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(offset.x - point.x - anchor.x + width, offset.y - point.y -anchor.y - height));
pos.apply(tooltip);
}
function buildMap() {
map = new GMap2((mapdiv), {draggableCursor:"auto", draggingCursor:"move"});
// Добавляем слушатель события для белых маркеров
GEvent.bind(map, "click", this, this.leftClick);
// Добавляем div элемент для toolips
tooltip = document.createElement("div");
tooltip.className="tooltip";
map.getPane(G_MAP_MARKER_PANE).appendChild(tooltip);
// Определяем карту и добавляем элементы управления
map.setCenter(new GLatLng(56.2980387, 43.9123535), 13);
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.disableDoubleClickZoom();
}
function leftClick(overlay, point) {
if(point) {
// Иконка для белого маркера
var icon = new GIcon();
icon.image = icon_url +"mm_20_white.png";
addIcon(icon);
count++;
var w_marker = new GMarker(point, icon);
map.addOverlay(w_marker);
w_marker.content = count;
markers.push(w_marker);
points.push(point);
w_marker.tooltip = "Точка "+ count;
GEvent.addListener(w_marker, "mouseover", function() {
showTooltip(w_marker);
});
GEvent.addListener(w_marker, "mouseout", function() {
tooltip.style.display = "none";
});
if(markers.length > 1) {
// Рисуем красную полилинию
var poly = new GPolyline(points, "#ff0000", 2, 1);
map.addOverlay(poly);
polylines.push(poly);
}
// Слушаем событие удаление маркера
GEvent.addListener(w_marker, "click", function() {
tooltip.style.display = "none";
// Удаляем все полилинии, прежде чем делать более короткий путь
for(var m= 0; m < polylines.length; m++) {
map.removeOverlay(polylines[m]);
}
polylines.length = 0;
// Удаляем маркер
for(var n = 0; n < markers.length; n++) {
if(markers[n] == w_marker) {
map.removeOverlay(markers[n]);
break;
}
}
// Уменьшаем массив маркеров и точек и настраиваем счетчик
markers.splice(n, 1); points.splice(n, 1);
if(markers.length == 0) {
count = 0;
}
else {
count = markers[markers.length-1].content;
}
// Рисуем короткий путь
var newpoly = new GPolyline(points, "#ff0000", 2, 1);
map.addOverlay(newpoly);
polylines.push(newpoly);
});
}
}
//Выводим координаты маркеров при клике на ссылку Сохранить линию
function showPoints() {
for (var n = 0 ; n < points.length ; n++ ) {
document.getElementById("route").innerHTML += points[n]+'<br>';
}
}
//]]>
</script>
</body>
</html> |
С начала мы определяем глобальные переменные: для объекта карты — map и mapdiv, значение счетчика count = 0, массивы для хранения координат меток points, маркеров и полилиний, путь до папки со значками icon_url и переменную для пояснений tooltip
Функция addIcon определяет значки для маркеров.
Следующая функция служит для создания и отображения подсказок при наведении курсора мыши на конкретный маркер.
Функция buildMap отвечает за формирование окна карты с элементами управления.
Функция leftClick наиболее интересна, т.к выполняет основной функционал по созданию и редактированию полилинии.
Рассмотрим ее подробнее.
Она вызывается при клике по карте, в точку щелчка помещается маркер с подсказкой (tooltip) и счетчик count увеличивается на единицу.
Если количество маркеров больше одного, то между предыдущим и последним рисуем отрезок линии.
В этой же функции отслеживается событие щелочек по маркеру GEvent.addListener.
При этом удаляются все подсказки (tooltip) и вся полилиния с карты.
Удаляется необходимый маркер из массива markers, а затем уменьшается массив маркеров и настраивается счетчик.
После этого рисуем новую, короткую полилинию.
Последняя функция showPoints выводит координаты узлов полилинии на страницу с картой после строки Координаты вершин полилинии:, когда мы щелкаем по ссылке Сохранить линию
В следующей части мы рассмотрим, как сохранить нашу полилинию в базе данных MySQL, а затем вывести ее снова на карту.
огромное спасибо!
Теперь ждем эту же сатать только для Яндек Карт
Ждем про сохранение и воспроизведение ) . Штука полезная
Ну когда же будет следующая? Дайте пожалуйста-а-а-а-а. Нужно для завершения дипломной работы. Сроки горят. Заранее спасибо.
В понедельник 24 мая
а можно в воскресенье, а? пожалуйста. Или подскажите, где найти похожую информацию на русском.
ну где же продолжение???? так жду….
http://webmap-blog.ru/?p=562
используя ваш код я добился того, что подписи отбражаются постоянно, снизу маркера. при изменении зума, маркеры перерисовываются, а подписи нет. каким образом можно этого добится?