Выводим содержимое CSV-файла на Яндекс.Карту — версия для API 2.x

Автор: | 21.04.2013
3 комментария

На своем блоге я уже рассказывал о том, как вывести содержимое CSV-файла на Яндекс.Карту.

В этой заметке я покажу как тоже самое сделать несколькими способами для API Яндекс.Карт 2.х.

Файл с исходными данными в формате CSV — avto_markers.csv, мы возьмем из уже упомянутой заметки.

Код файла, для вывода данных на карту, будет иметь вид:

<!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; charset=utf-8" />
<title>Отображение данных из csv-афйла на Яндекс.Картах - Версия для API 2.x</title>
<script src="http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU" type="text/javascript"></script>
<script src="http://yandex.st/jquery/1.9.1/jquery.min.js"></script>
 
<script type="text/javascript">
 
var myMap, myCollection;
 
ymaps.ready(function  () {
 
	myMap = new ymaps.Map('ymapid', {
                    center: [56.3241,44.0014],
                    zoom: 15,
					behaviors: ["scrollZoom","drag"]
                });	
 
	myCollection = new ymaps.GeoObjectCollection();			
 
	$.ajax({
		url:'avto_markers.csv',
		success: function(data){
		var rows = data.split("n");
		var src_res='';
		for(var i in rows){
			var colls=rows[i].split(";");//или другой символ разделитель
 
			// Устанавливаем координаты и содержимое балуна
			myPlacemark = new ymaps.Placemark([colls[5], colls[4]], {
                    // Свойства                    
                    balloonContentHeader: '<div style="color:#ff0303;font-weight:bold">'+colls[1]+'</div>',
                    balloonContentBody: '<div style="font-size:12px;"><strong>Адрес:</strong> '+colls[2]+'<br /><strong>Телефон:</strong> '+colls[3]+'</div>'              
                }, {
                    // Опции
                    preset: 'twirl#carIcon'
                });
 
             myCollection.add(myPlacemark);
 
			src_res=src_res+'<li>'+'<a href="#" onClick="return go_point('+colls[5]+', '+colls[4]+",'"+colls[1]+"','"+colls[2]+"','"+colls[3]+"','"+colls[0]+"');"+'">'+colls[1]+'</a></li>';
		}
			$('#menu').html(src_res);
			myMap.geoObjects.add(myCollection);
 
			myMap.setBounds(myCollection.getBounds());
		}
 
 
	});			
 
});
 
function go_point(lat,lon,name,address,telefon,id){
myMap.setCenter([lat, lon], 16);
myMap.geoObjects.remove(myCollection);
 
var placemark = new ymaps.Placemark([lat, lon], {
                    // Свойства                    
                    balloonContentHeader: '<div style="color:#ff0303;font-weight:bold">'+name+'</div>',
                    balloonContentBody: '<div style="font-size:12px;"><strong>Адрес:</strong> '+address+'<br /><strong>Телефон:</strong> '+telefon+'</div>'                
                }, {
                    // Опции
                    preset: 'twirl#carIcon'
                });
 
            // Добавляем метку на карту
            myMap.geoObjects.add(placemark);
 
 
placemark.balloon.open();
return false;
}	
 
 
</script>
 
<style type="text/css">
 
    #menu {
        list-style: none;
        margin: 0;
        padding: 0;
    }
 
    #menu a {
        text-decoration: none;
         border-bottom: dashed 1px;
        }            
 
    a.active {
		color: #000;
    }
 
</style>
 
</head>
 
<body>
 
<table>
 
    <tr>
        <td valign="top"><div id="ymapid" style="width:800px;height:600px"></div></td>
		<td valign="top"><ul id="menu"></ul></td>
    </tr>
 
    </table>
 
</body>
</html>

Перечислю основные отличия данного кода от старой версии.

В самом начале мы подключаем библиотеку jQuery, так как она не входит в состав API Яндекс.Карт 2.х строкой:

<script src="http://yandex.st/jquery/1.9.1/jquery.min.js"></script>

Далее, мы определяем начальные параметры карты: координаты центра, начальный масштаб и возможность изменения масштаба колесиком мыши.

	myMap = new ymaps.Map('ymapid', {
                    center: [56.3241,44.0014],
                    zoom: 15,
					behaviors: ["scrollZoom","drag"]
                });

Затем, мы определяем коллекцию объектов myCollection.

Асинхронно, используя библиотеку jQuery, мы читаем содержимое файла avto_markers.csv, разбиваем его содержимое по строкам rows и по столбцам colls.

Из полученных данных формируется метки и добавляются в нашу коллекцию myCollection.

Также у нас динамически формируется меню со ссылкой для каждой метки.

src_res=src_res+'<li>'+'<a href="#" onClick="return go_point('+colls[5]+', '+colls[4]+",'"+colls[1]+"','"+colls[2]+"','"+colls[3]+"','"+colls[0]+"');"+'">'+colls[1]+'</a></li>';

Последним шагом, меню добавляется на нашу страницу с картой, а коллекция меток на карту.

$('#menu').html(src_res);
myMap.geoObjects.add(myCollection);

Строка myMap.setBounds(myCollection.getBounds()); производит центрирование и масштабирование карты по содержимому геоколлекции.

При клике по ссылке из меню, вызывается функция go_point с параметрами.

В этой функции мы удаляем нашу коллекцию меток с карты

myMap.geoObjects.remove(myCollection);

центрируем карту на нужную точку

myMap.setCenter([lat, lon], 16);

И в этой точке создаем метку и задаем свойства для отображения балуна, а затем отображаем балун в данной точке.

Отображение данных из csv-афйла на Яндекс.Картах - Версия для API 2.x

Посмотреть пример в действии

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

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

Для нашего примера мы зададим свойство iden — идентификатор метки, в котором будем хранить значение из первой колонки файла avto_markers.csv

По этому свойству, так как оно уникально для каждой метки, мы сможем определить нужную нам в коллекции геообъектов.

Код примера будет иметь следующий вид:

<!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; charset=utf-8" />
<title>Вариант-2 - Отображение данных из csv-афйла на Яндекс.Картах - Версия для API 2.x</title>
<script src="http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU" type="text/javascript"></script>
<script src="http://yandex.st/jquery/1.9.1/jquery.min.js"></script>
 
<script type="text/javascript">
 
var myMap, myCollection;
 
ymaps.ready(function  () {
 
	myMap = new ymaps.Map('ymapid', {
                    center: [56.3241,44.0014],
                    zoom: 15,
					behaviors: ["scrollZoom","drag"]
                });	
 
	myCollection = new ymaps.GeoObjectCollection();			
 
	$.ajax({
	url:'avto_markers.csv',
			success: function(data){
			var rows = data.split("n");
			var src_res='';
			for(var i in rows){
			var colls=rows[i].split(";");//или другой символ разделитель
 
			// Устанавливаем координаты и содержимое балуна
			myPlacemark = new ymaps.Placemark([colls[5], colls[4]], {
                    // Свойства 
					iden: colls[0],	
                    balloonContentHeader: '<div style="color:#ff0303;font-weight:bold">'+colls[1]+'</div>',
                    balloonContentBody: '<div style="font-size:12px;"><strong>Адрес:</strong> '+colls[2]+'<br /><strong>Телефон:</strong> '+colls[3]+'</div>'              
                }, {
                    // Опции
                    preset: 'twirl#carIcon'
                });
 
             myCollection.add(myPlacemark);
 
			$('#menu').append('<li>'+'<a href="#" onClick="return go_point('+colls[0]+");"+'">'+colls[1]+'</a></li>');
			}
			myMap.geoObjects.add(myCollection);
 
			myMap.setBounds(myCollection.getBounds());
			}
 
 
	});			
 
});
 
function go_point(id){
myCollection.each(function (item) {
if (item.properties.get('iden') == id) {
var coord = item.geometry.getCoordinates();
myMap.setCenter(coord, 16);
item.balloon.open();
}
});	
 
}
 
</script>
 
<style type="text/css">
 
    #menu {
        list-style: none;
        margin: 0;
        padding: 0;
    }
 
    #menu a {
        text-decoration: none;
         border-bottom: dashed 1px;
        }            
 
    a.active {
		color: #000;
    }
 
</style>
 
</head>
 
<body>
 
<table>
    <tr>
 
        <td valign="top"><div id="ymapid" style="width:800px;height:600px"></div></td>
		<td valign="top"><ul id="menu"></ul></td>
 
    </tr>
</table>
 
</body>
</html>

Большей частью он похож на предидущий.

Отличия заключаются в следующем.

При создании метки мы задаем значение своего свойства iden строкой

iden: colls[0],

При клике по ссылке вызывается функция go_point у которой теперь только один параметр id.

Далее в этой функциии мы находим элемент в коллекции у которого параметр iden равен id.

Получаем значения координат для этой метки

var coord = item.geometry.getCoordinates();

Производим центрирование карты

myMap.setCenter(coord, 16);

И открываем балун для данной метки

item.balloon.open();

Вариант-2 - Отображение данных из csv-афйла на Яндекс.Картах - Версия для API 2.x

Посмотреть пример в действии

Изменим код второго примера так, чтобы в маркере отображалось id метки, пункты миню также имели соответствующую нумерацию.

Для этого нам необходимо изменить всего несколько строк кода.

При определении свойств метки после строки

iden: colls[0],

добавим код

iconContent: colls[0],

А стиль метки изменим с twirl#carIcon на twirl#lightblueIcon

Также изменим строку формирования элементов меню

$('#menu').append('<li>'+'<a href="#" onClick="return go_point('+colls[0]+");"+'">'+colls[1]+'</a></li>');

заменим на

$('#menu').append('<li>'+colls[0]+'. '+'<a href="#" onClick="return go_point('+colls[0]+");"+'">'+colls[1]+'</a></li>');

В результате мы увидим следующее:

Вариант-3 - Отображение данных из csv-афйла на Яндекс.Картах - Версия для API 2.x

Посмотреть пример в действии

Загрузить архив с файлами примеров.

Выводим содержимое CSV-файла на Яндекс.Карту — версия для API 2.x: 3 комментария

  1. Сергей

    Спасибо за пример.
    Хочу отметить, что в первом варианте, если идти от списка к меткам на карте, то остальные метки перестают корректно отображаться на карте. (браузер Mozilla Firefox 20.1)
    P.S.: Почему то на Вашей страничке в фейсбук нельзя поставить лайк и прокомментировать публикацию 🙁

    Ответить ↓
  3. Сергей

    Автор подскажи, как сделать чтобы при наведение на ссылку на карте изменялся цвет балуна?

    Ответить ↓

Добавить комментарий

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