среда, 15 февраля 2012 г.

Поэтапное описание создания карты Яндекс и объектов, хранящихся в БД. Вывод объектов Яндекс.Карты на страницы сайта


В предыдущей статье мы рассмотрели как можно сохранить объекты Яндекс.Карты в БД и каким образом организовать управление (в частности перетаскивание объектов) на карте. Также были рассмотрены методы быстрого поиска по адресу объектов.
Здесь мы рассмотрим каким образом организовать вывод на карту разных типов объектов на карту Яндекс, находящуюся на страницах сайта.
Уже ранее при создании сайта мы получили уникальный ключ Яндекс.Карт и использовали его для карты в системе управления. Аналогичным образом мы выводим карту на странице сайта, а затем уже получаем список объектов для нее.

В API Яндекс.Карт существует несколько способов вывода объектов на карте:
1) Явное задание координат в при инициализации карты посредством javascript;
2) Получение списка объектов с помощью XML-схемы.
Мы будем использовать второй способ, т.к. для  нашей карты требуется их выборка из базы данных.

Организуем файл get_addresses_xml.php, в котором укажем, что тип данных при обращении сервера к этому файлу будет XML:

header("Content-type: text/xml");

Далее мы должны получить список разнотипных объектов из базы данных:

$items[1] = getElementsList(1, $opts);
$items[2] = getElementsList(2, $opts);
$items[3] = getElementsList(3, $opts);
$items[4] = getElementsList(4, $opts);

,где getElementsList - это функция получения определенного типа объектов из БД:


function getElementsList ($type, $where = '') {
$sql = "SELECT * FROM module_maps_category WHERE is_show = 1 AND (obj_type = $type) ".$where;
$res = mysql_query($sql) or die('Ошибка выбора объектов');
$i = 0;
while($rows = mysql_fetch_assoc($res)) {
$tmp['elems'][$i] = $rows;
$sql2 = "SELECT * FROM module_maps_elements WHERE is_show = 1 AND category_id = ".$rows['id']." LIMIT 0,2";
$res2 = mysql_query($sql2) or die('Ошибка выбора объектов');
$j = 1;
while($rows2 = mysql_fetch_assoc($res2)) {
if($rows2['original_photo_file_name']) $tmp['elems'][$i]['pic'.$j++] = $rows2['original_photo_file_path'].'preview_'.$rows2['original_photo_file_name'];
}
$i++;
}
return $tmp;
}

Полученный список элементов в виде массива мы должны передать в шаблон smarty:


$smarty->assign('types', $_SESSION);
$smarty->assign('HOST', HOST);
$smarty->assign('items', $items);
$smarty->display('address.xml');

Для каждого типа объектов в файле address.xml создан свой уникальный стиль метки.

<span style="background-color: #fff2cc; color: #2a221a; font-family: Verdana, sans-serif; font-size: xx-small;">
<ymaps:ymaps xmlns:ymaps="http://maps.yandex.ru/ymaps/1.x" xmlns:repr="http://maps.yandex.ru/representation/1.x" xmlns:gml="http://www.opengis.net/gml" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maps.yandex.ru/schemas/ymaps/1.x/ymaps.xsd">
<repr:Representation>
<repr:Style gml:id="mediaStyle1">
   <repr:iconStyle>
       <repr:href>http://www.artmp.ru/images/map/sbillboard.png</repr:href>
<repr:size x="28" y="25"/>
<repr:offset x="-9" y="-25"/>
   </repr:iconStyle>
<repr:balloonContentStyle>
<repr:template>#mediaTemplate</repr:template>
</repr:balloonContentStyle>
</repr:Style>
<repr:Style gml:id="mediaStyle2">
   <repr:iconStyle>
       <repr:href>http://www.artmp.ru/images/map/d_sbillboard.png</repr:href>
<repr:size x="28" y="25"/>
<repr:offset x="-9" y="-25"/>
   </repr:iconStyle>
<repr:balloonContentStyle>
<repr:template>#mediaTemplate</repr:template>
</repr:balloonContentStyle>
</repr:Style>
<repr:Template gml:id="mediaTemplate">
<repr:text>
<![CDATA[
<div style="font-weight: bold; font-size: 16px; color: #F37125;">Объект $[name]</div>
<div>$[description]</div>
]]>
</repr:text>
</repr:Template>
</repr:Representation>
<ymaps:GeoObjectCollection>
{foreach from=$items item=item key=item_key}
{foreach from=$item.elems item=elem}

<gml:featureMember>
<ymaps:GeoObject id="redrose">
<gml:name>{$elem.category_name}</gml:name>
<gml:description>{$elem.city}, {$elem.street}, {$elem.address} {if $elem.address_note}({$elem.address_note}){/if}</gml:description>
<gml:Point>
<gml:pos>{$elem.yandex_point|replace:',':' '}</gml:pos>
</gml:Point>
<ymaps:style>#mediaStyle{$item_key}</ymaps:style>
</ymaps:GeoObject>
</gml:featureMember>
{/foreach}
{/foreach}
</ymaps:GeoObjectCollection>
</ymaps:ymaps>
</span>

Комментариев нет:

Отправить комментарий