+7 495 008 8452
  • Загрузка
Выберите ваш цвет

Кластеризация отметок на карте Google в «Битрикс»

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

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

 
1. Создаем новостную страницу

Визуальным редактором создаем новую страницу, подключаем шаблон комплексного компонента news.

2. Свойство инфоблока «привязка к карте»

Зайдя в свойства инфоблока, создаем новый тип «привязка к карте Google Maps». Зададим ему код, допустим «MAP».

3. Кастомизируем компонент шаблона

Находим файл компонента подключенного к странице шаблона news.list с именем template.php. Заменяем весь код на приведенный ниже:

<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?>
<div class="news-list">
<?$arProperty = $arResult["DISPLAY_PROPERTIES"];
$PLACEMARKS = array();
$i=0;
foreach($arResult["ITEMS"] as $arElement)
{
foreach ($arElement["DISPLAY_PROPERTIES"] as $pid=>$arProperty)
{
if($pid=="MAP")      $MAP = explode (",", $arProperty["VALUE"]);
$TEXT ="<table>".
"<tr>".
"<td>".
"<img src="".$arElement["PREVIEW_PICTURE"]["SRC"]."" />".
"</td>".
"<td>".
$arElement["NAME"]."<br/>".  
$arElement["PROPERTIES"]["PHONE"]["VALUE"]."<br/>".
"<a href="".$arElement["DETAIL_PAGE_URL"] ."">Подробнее</a>".
"</td>".
"</tr>".
"</table>";
$PLACEMARKS[$i]["LON"] = $MAP[1]; //Заполняем массив маркера данными
$PLACEMARKS[$i]["LAT"] = $MAP[0];
$PLACEMARKS[$i]["TEXT"] = $TEXT; 
}
$i++;
}

$APPLICATION->IncludeComponent("bitrix:map.google.view", "gmap-montag", Array(
"INIT_MAP_TYPE" => "MAP",   // Стартовый тип карты
"MAP_DATA" => serialize(
array(
"google_lat"=>$MAP[0],    
"google_lon"=>$MAP[1],
"google_scale"=>6,
"PLACEMARKS"=>$PLACEMARKS)),// Данные выводимые на карте
"MAP_WIDTH" => "AUTO",   // Ширина карты
"MAP_HEIGHT" => "600",   // Высота карты
"CONTROLS" => array(   // Элементы управления
0 => "SMALL_ZOOM_CONTROL",
1 => "TYPECONTROL",
2 => "SCALELINE",
),
"OPTIONS" => array(   // Настройки
0 => "ENABLE_SCROLL_ZOOM",
1 => "ENABLE_DBLCLICK_ZOOM",
2 => "ENABLE_DRAGGING",
3 => "ENABLE_KEYBOARD",
),
"MAP_ID" => "",   // Идентификатор карты
),
false,
array(
"ACTIVE_COMPONENT" => "Y"
)
);?>  
</div>

4. Кастомизируем шаблон карты

Находим файл шаблона карты, в нашем случае он находится здесь

bitrix/templates/мое_имя_шаблона/components/bitrix/map.google.view/gmap-montag/template.php

Заменяем код в template.php на собственный

<?if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true) die();?>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script>
<style type="text/css">
#map-container { padding: 6px;
border-width: 1px;
border-style: solid;
border-color: #ccc #ccc #999 #ccc;
-webkit-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
-moz-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
box-shadow: rgba(64, 64, 64, 0.1) 0 2px 5px;
width: 800px;
}

   #map { width: auto;
height: 600px;
}
</style>

<div id="map-container"><div id="map"></div></div>
<?if (is_array($arResult['POSITION']['PLACEMARKS']) && ($cnt = count($arResult['POSITION']['PLACEMARKS']))):?>
<script type="text/javascript">
function PrepareMarkers()    //подготовка точек для роботы в JS
{
points = [];
<?for($i = 0; $i < $cnt; $i++):?>
points [<?=$i?>]=<?echo CUtil::PhpToJsObject($arResult['POSITION']['PLACEMARKS'][$i])?>;
<?endfor;?>
return points;
};

$(document).ready(
function () {
initialize();
return true;
});
</script>
<?endif;?>

5. Кастомизируем script.js

Вводим в script.js собственный код:

var map;
function initialize()
{
var center = new google.maps.LatLng(48.35, 31.4);
map = new google.maps.Map(document.getElementById('map'), {
zoom: 6,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP
});

var infowindow = new google.maps.InfoWindow({
content: "" 
});



var Klaster = PrepareMarkers();
var dots = [];
for ( var i = 0; i<Klaster.length; i++)
{
var baloon = Klaster[i].TEXT;
var marker = add_marker(Klaster[i].LAT, Klaster[i].LON, baloon); //лирическое отступление, когда писал перепутал
dots.push(marker);                            //LAT и LON местами, точки выводились в саудовской аравии, 
}                                        // лопатил код, пока случайно не уменьшил масштаб:(
var markerCluster = new MarkerClusterer(map, dots);

}

function add_marker(LAT, LON, TEXT) {

var infowindow = new google.maps.InfoWindow({
content: TEXT
});

var marker = new google.maps.Marker({
position: new google.maps.LatLng(LAT, LON),
map: map
});

google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map, marker);
});

return marker;
}

 

Готово!

-------------------------------
Спасибо за внимание!
Читайте свежий выпуск «Кладовки программиста» каждый день!

Назад в раздел

Подписаться на новые материалы раздела:
Загрузка...