Когда количество меток на интерактивной карте переваливает за два десятка, толку от нее становится мало. Все пространство карты получается утыкано флажками объектов так, что собственно карты уже и не видать. Решается эта задача через кластеризацию с показом групп флажков отдельными значками и выноской количества. Пошаговая реализация такого способа перед вами.
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;
}
Готово!
-------------------------------
Спасибо за внимание!
Читайте свежий выпуск
«Кладовки программиста» каждый день!
Назад в раздел