API Google Maps рисуем полилинию и сохраняем ее в базе данных MySQL

Автор: | 17.05.2010

С этой заметки я начну рассказ о том, как можно организовать рисование полилинии на карте с использованием 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&amp;v=2&amp;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, а затем вывести ее снова на карту.

API Google Maps рисуем полилинию и сохраняем ее в базе данных MySQL: 9 комментариев

  1. Katya

    Ну когда же будет следующая? Дайте пожалуйста-а-а-а-а. Нужно для завершения дипломной работы. Сроки горят. Заранее спасибо.

  2. Katya

    а можно в воскресенье, а? пожалуйста. Или подскажите, где найти похожую информацию на русском.

  3. XxX

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

Добавить комментарий для nord_tramper Отменить ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *