Создание карты на сайте с адресами магазинов, с использованием API Яндекс.Карт версии 2.х

Автор: | 26.08.2012
8 комментариев

На своем блоге, я уже рассматривал пример «Создание карты на сайте с адресами магазинов, с использованием API Яндекс.Карт». Но та версия была для API Яндекс.Карт 1.x.

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

В начале возьмем три файла без изменений из примера в уже упомянутой заметке.

Это файлы:

mvideo_shops.sql — с исходными данными о магазинах М.Видео, который необходимо загрузить в базу данных MySQL;
searcheshop.php — файл извлекает данные о магазинах М.Видео для конкретного города;
bd.php — файл для соединения с базой данных.

Новый код файла map.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 Яндекс.Карт версии 2.х</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://yandex.st/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script src="http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU" type="text/javascript"></script>
<style>
#shopconteyner{
width: 100%;
}
 
#shops{ float:left;
width: 30%;
}
 
#YMapsID{
margin-left: 40%;
width: 60%;
height: 600px;
}
</style>    
 
<script type="text/javascript">	
	var map;
 
	var collection;
 
	ymaps.ready(function () {
    map = new ymaps.Map('YMapsID', {
        center: [56.326944, 44.0075],
        zoom: 15,
        type: 'yandex#map',
        behaviors: ['default', 'scrollZoom']
    });
 
	//Добавляем элементы управления
	 map.controls                
            .add('zoomControl')                
            .add('typeSelector')                
            .add('mapTools');
 
	$("select").change(function () {			
	var town = $("#selecttown :selected").val();
	do_search(town);
 
	})
    .change();			
	})
 
function do_search(town){
 
$('#shops').html('');
 
$.getJSON("searcheshop.php", {town: town}, function(json){ 
var src_res="<p><strong>результаты поиска: </strong></p>";
 
$.getScript('bounds-collection.js', function () {
collection = new GeoCollectionBounds();
src_res=src_res+'<p><strong>Найдено объектов: '+json.length+'</strong></p>';
 
collection.events.add('boundschange', function (e) {
            map.setBounds(e.get('bounds'));
});
 
for (i = 0; i < json.length; i++) {
var sch = i+1;
var placemark = new ymaps.Placemark([json[i].lon,json[i].lat], {
	iconContent: sch,
    balloonContentHeader: '<div style="color:#ff0303;font-weight:bold">'+json[i].address+'</div>',
    balloonContentBody: '<div style="font-size:13px;"><div><strong>Адрес:</strong> '+json[i].address+'<br>'+'<strong>Режим работы:</strong> '+json[i].rrab+'<br></div></div>'   
        }, {
        // Опции
        preset: 'twirl#nightStretchyIcon' // иконка растягивается под контент
        });
collection.add(placemark);
src_res=src_res+'<p>'+sch+'. '+'<a href="#" onClick="return go_to('+json[i].lat+', '+json[i].lon+",'"+json[i].address+"');"+'">'+json[i].address+'</a></p>';
}
 map.geoObjects.add(collection);
// Set center and zoom using collection bounds.
map.setBounds(collection.getBounds());
 
$('#shops').html(src_res);
});
});
}
 
function go_to(lat,lon,address){
map.setCenter([lon, lat], 16);
 
 collection.each(function (item) {
    if (item.properties.get('balloonContentHeader') == '<div style="color:#ff0303;font-weight:bold">'+address+'</div>') {
        item.balloon.open();
     }
	});
return false;
}		
 
 
</script>
 
</head>
<body>
<div id="searchform">
<select id="selecttown">
<option value="Екатеринбург">Екатеринбург</option>
<option value="Казань">Казань</option>
<option value="Нижний Новгород">Нижний Новгород</option>
<option value="Пермь">Пермь</option>
<option value="Самара">Самара</option>
<option value="Санкт-Петербург">Санкт-Петербург</option>
</select>
</div>
 
<div id="shopconteyner">
<div id="shops"></div>
<div id="YMapsID"></div>
</div>
</body>
</html>

Посмотреть пример в работе

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

Затем подключаем API карт.

После определяем стили для отображения карты и списка магазинов.

В главной функции мы устанавливаем начальные параметры для нашей карты.

Функция do_search служит для отправки параметра о выбранном городе скрипту searcheshop.php, а ответные данные добавляются на карту и в список слева от нее.

Ее код немного отличается от того, что использоваться в для версии API Яндекс.Карт 1.x.

Порядком задания геокоординат для метки, если для API Яндекс.Карт версии 1.x координаты задавались в виде широта, долгота, то для API Яндекс.Карт версии 2.х. — долгота, широта.

Еще в API Яндекс.Карт 2.х. отсутствует метод bounds для автоматического позиционирования карты, чтобы вместить все показанные на ней объекты.

Для реализации этой возможности я использовал код класса отсюда.

Автор данного класса бабушка-бэтмен из Клуба Яндекс.Карт.

Функция go_to служит показа информации об отдельном магазине на более крупном масштабе.

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

А в ней происходит центрирование карты и по адресу определяется какой балун у метки необходимо открыть.

После чего этот балун открывается.

Еще мне задавали вопрос, как можно использовать ссылки вместо select для выбора городов.

Это можно легко сделать.
В начале заменяем код формы searchform на следующий:

<div id="searchform">
<a href="#" onclick="do_search('Екатеринбург')">Екатеринбург</a><br>
<a href="#" onclick="do_search('Казань')">Казань</a><br>
<a href="#" onclick="do_search('Нижний Новгород')">Нижний Новгород</a><br>
<a href="#" onclick="do_search('Пермь')">Пермь</a><br>
<a href="#" onclick="do_search('Самара')">Самара</a><br>
<a href="#" onclick="do_search('Санкт-Петербург')">Санкт-Петербург</a>
</div>

А в главной функции инициализации карты необходимо заменить код:

	$("select").change(function () {			
	var town = $("#selecttown :selected").val();
	do_search(town);
 
	})
    .change();

на строку:

do_search('Екатеринбург');

Посмотреть, измененный пример в действии

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

Надеюсь, что данная заметка будет полезной для Вас.

Создание карты на сайте с адресами магазинов, с использованием API Яндекс.Карт версии 2.х: 8 комментариев

  1. Сергей

    Здравствуйте. На прошлой версии при выборе нового города, метки с прошлого города удалялись. Как это реализовать на новой версии? Буду очень благодарен за ответ.

    Ответить ↓
  2. Антон

    Здравствуйте, а как бороться с тем, что при наличии в городе только одной точки, боундсом автоматом ставится такой зум на котором карты не прорисовыватся.
    Заранее спасибо.

    Ответить ↓
  3. Антон

    хотя в принципе уже разобрался с помощью
    checkZoomRange:
    🙂

    Ответить ↓
  5. Денис

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

    Ответить ↓
  6. Андрей

    «В самом начале мы подключаем java-script-библиотеку jQuery, т. к. она уже не включена в API Яндекс.Карт версии 2.х.
    Затем подключаем API карт.»

    А не подскажите, как и куда их подключать?

    Ответить ↓
    1. admin Автор записи

      Все подробно написано в статье. jQuery и API Яндекс.Карт подключаются в разделе head файла map.html

      Ответить ↓

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

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