Используем свою карту вместе с компонентом SOBI2 для Joomla

Автор: | 28.02.2010
1 комментарий

На своем блоге я уже писал о том как можно изменить компонент каталога SOBI2 для Joomla, для использования Яндекс.Карт: «Изменяем компонент каталога SOBI2 для Joomla, заменяем карты Google на Яндекс.Карты»; «Изменяем компонент каталога SOBI2 для Joomla – продолжение» .

В этой заметке я познакомлю Вас с тем, как можно использовать свою карту применяя API Google Maps.

Для начала у Вас должен быть уже установлен сам компонент SOBI2 и создана необходимая структура каталога.

В поля координат забиты соответствующие координаты.

При просмотре полной информации о записи наблюдаем:

Теперь давайте заменим карту Google на свою карту.

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

В результате у Вас должно получиться примерно следующее

Исходный код данной страницы:

 
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true&amp;key=ABQIAAAACHCJdlgAEGcD_flKUFEmVhTebch7GpJ_aaTy16RbT6kCxYZZEBSjZEe9Alx52DXyusD29r0S9iN6qA" type="text/javascript"></script>
 
<center><div id="map" style="width: 600px; height: 400px"></div></center>
 
<script type="text/javascript">
    //<![CDATA[
 
     // ============================================================
   function CustomGetTileUrl(a,b)
    {
        if ( b == 11 && a.x >= 1272 && a.x <= 1275 && a.y >= 633 && a.y <= 635 )
        {
            return "http://www.map.cek.ru//nnmaps//Z" + b + "/" + a.y + "/" + a.x + ".jpg"; // replace that with a "real" URL
        }
        else if ( b == 12 && a.x >= 2545 && a.x <= 2550 && a.y >= 1266 && a.y <= 1271 )
        {
            return "http://www.map.cek.ru//nnmaps//Z" + b + "/" + a.y + "/" + a.x + ".jpg"; // replace that with a "real" URL
        }
        else if ( b == 13 && a.x >= 5090 && a.x <= 5100 && a.y >= 2533 && a.y <= 2543 )
        {
            return "http://www.map.cek.ru//nnmaps//Z" + b + "/" + a.y + "/" + a.x + ".jpg"; // replace that with a "real" URL
        }
        else if ( b == 14 && a.x >= 10180 && a.x <= 10200 && a.y >= 5067 && a.y <= 5087 )
        {
            return "http://www.map.cek.ru//nnmaps//Z" + b + "/" + a.y + "/" + a.x + ".jpg"; // replace that with a "real" URL
        }
        else if ( b == 15 && a.x >= 20361 && a.x <= 20400 && a.y >= 10135 && a.y <= 10174 )
        {
            return "http://www.map.cek.ru//nnmaps//Z" + b + "/" + a.y + "/" + a.x + ".jpg"; // replace that with a "real" URL
        }
        else if ( b == 16 && a.x >= 40723 && a.x <= 40801 && a.y >= 20270 && a.y <= 20348 )
        {
            return "http://www.map.cek.ru//nnmaps//Z" + b + "/" + a.y + "/" + a.x + ".jpg"; // replace that with a "real" URL
        }
        else if ( b == 17 && a.x >= 81446 && a.x <= 81603 && a.y >= 40540 && a.y <= 40697 )
        {
            return "http://www.map.cek.ru//nnmaps//Z" + b + "/" + a.y + "/" + a.x + ".jpg"; // replace that with a "real" URL
        }
        else if ( b == 18 && a.x >= 162893 && a.x <= 163206 && a.y >= 81080 && a.y <= 81394 )
        {
            return "http://www.map.cek.ru//nnmaps//Z" + b + "/" + a.y + "/" + a.x + ".jpg"; // replace that with a "real" URL
        }
        return G_NORMAL_MAP.getTileLayers()[0].getTileUrl(a,b);
    }  
    // ============================================================
 
 
 
	 if (GBrowserIsCompatible()) {
	  var map = new GMap2(document.getElementById('map'));
 
            // Определяем тип карты
            map.addMapType(G_PHYSICAL_MAP);
 
          // определяем элементы управления картой
            map.addControl(new GLargeMapControl());
            map.addControl(new GScaleControl());
            map.enableScrollWheelZoom();
            map.enableContinuousZoom();
 
            // Создаем copyright collection
            var copyCollection = new GCopyrightCollection('nn-map');
            var copyright = new GCopyright(1, new GLatLngBounds(new GLatLng(56.1700230, 43.6816406), new GLatLng(56.4260545, 44.1430664)), 0, "Created by Ugolnikov Sergey");
            copyCollection.addCopyright(copyright);
 
            //Определяем слой нашей карты
            var tilelayers = new Array();
            tilelayers[0] = G_NORMAL_MAP.getTileLayers()[0];
            tilelayers[1] = new GTileLayer(copyCollection, 11, 18 );
            tilelayers[1].getTileUrl = CustomGetTileUrl
            tilelayers[1].getOpacity = function () {return 1.00;};//of the non transparent part
            tilelayers[1].isPng = function() {return false;}; 
 
            // Устанавливаем параметры для нашего слоя карты
            var GMapTypeOptions = new Object();
            GMapTypeOptions.minResolution = 11;
            GMapTypeOptions.maxResolution = 18;
            GMapTypeOptions.errorMessage = "Данные карты не доступны";
 
            //Создаем пользовательский слой
            var custommap = new GMapType(tilelayers, new GMercatorProjection(22), "nn-map", GMapTypeOptions);
            custommap.getTextColor = function() {return "#000000";};
            map.addMapType(custommap);
            map.setCenter( new GLatLng(56.2980387, 43.9123535), 14, custommap );
 
        }
 
 
 
    //]]>
    </script>

Сначала загружаем API Google Maps с соответствующим ключом для вашего сайта.

После этого определяем место под карту – элемент div  с именем map.

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

Далее идет функция для определения карты.

Задаем значение переменной map.

Тип карты и элементы управления.

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

Определяем, как будет формироваться наш слой карты.

Задаем параметры для нашего слоя

И создаем пользовательский слой custommap, центр карты и уровень масштаба.

В паке по адресу http:/www.map.cek.ru/nnmaps – храняться тайлы нашей карты.

Для использования нашей карты в компоненте SOBI2 необходимо отредактировать файл entry.functions.php, который находится по адресу /папка установки Joomla/components/com_sobi2/includes/ .

Открываем его для редактирования.

Находим в нем функцию showGoogleMaps, предпоследняя в файле.

Она отвечает за вывод карты при просмотре полного описания информации о компании, если введены координаты центра в соответствующие поля (filds_latmap и filds_lonmap).

И заменяем весь код в функции между строчками

function showGoogleMaps($mySobi, $config)
{

и

}
function waySearchUrl( $waySearchLink ), на новый код:

		if( !$config->useGoogleMaps || !isset( $config->googleMapsApiKey ) ) {
			return null;
		}
		$map_url = $config->key( "google_maps", "google_map_url", "http://maps.google.com");
		$map_api_version = $config->key("google_maps", "google_map_apiversion", "2");
 
		$title = $config->jsAddSlashes( $mySobi->title );
		$GeoPos = $config->getGeoPosition( $mySobi->id );
		if( $GeoPos['lat'] && $GeoPos['long'] && is_numeric( $GeoPos['lat'] ) && is_numeric( $GeoPos['lat'] ) ) {
			?>
						<div style="width: <?php echo $config->googleMapsWidth; ?>px; height: <?php echo $config->googleMapsHeight; ?>px;" id="sobi2GoogleMaps"></div>
						<script src="<?php echo $map_url?>/maps?file=api&amp;v=<?php echo $map_api_version?>&amp;key=<?php echo $config->googleMapsApiKey ?>" type="text/javascript"></script>
						<script type="text/javascript">
				//<![CDATA[
 
  // ============================================================
   function CustomGetTileUrl(a,b)
    {
        if ( b == 11 && a.x >= 1272 && a.x <= 1275 && a.y >= 633 && a.y <= 635 )
        {
            return "http://www.map.cek.ru//nnmaps//Z" + b + "/" + a.y + "/" + a.x + ".jpg"; // replace that with a "real" URL
        }
        else if ( b == 12 && a.x >= 2545 && a.x <= 2550 && a.y >= 1266 && a.y <= 1271 )
        {
            return "http://www.map.cek.ru//nnmaps//Z" + b + "/" + a.y + "/" + a.x + ".jpg"; // replace that with a "real" URL
        }
        else if ( b == 13 && a.x >= 5090 && a.x <= 5100 && a.y >= 2533 && a.y <= 2543 )
        {
            return "http://www.map.cek.ru//nnmaps//Z" + b + "/" + a.y + "/" + a.x + ".jpg"; // replace that with a "real" URL
        }
        else if ( b == 14 && a.x >= 10180 && a.x <= 10200 && a.y >= 5067 && a.y <= 5087 )
        {
            return "http://www.map.cek.ru//nnmaps//Z" + b + "/" + a.y + "/" + a.x + ".jpg"; // replace that with a "real" URL
        }
        else if ( b == 15 && a.x >= 20361 && a.x <= 20400 && a.y >= 10135 && a.y <= 10174 )
        {
            return "http://www.map.cek.ru//nnmaps//Z" + b + "/" + a.y + "/" + a.x + ".jpg"; // replace that with a "real" URL
        }
        else if ( b == 16 && a.x >= 40723 && a.x <= 40801 && a.y >= 20270 && a.y <= 20348 )
        {
            return "http://www.map.cek.ru//nnmaps//Z" + b + "/" + a.y + "/" + a.x + ".jpg"; // replace that with a "real" URL
        }
        else if ( b == 17 && a.x >= 81446 && a.x <= 81603 && a.y >= 40540 && a.y <= 40697 )
        {
            return "http://www.map.cek.ru//nnmaps//Z" + b + "/" + a.y + "/" + a.x + ".jpg"; // replace that with a "real" URL
        }
        else if ( b == 18 && a.x >= 162893 && a.x <= 163206 && a.y >= 81080 && a.y <= 81394 )
        {
            return "http://www.map.cek.ru//nnmaps//Z" + b + "/" + a.y + "/" + a.x + ".jpg"; // replace that with a "real" URL
        }
        return G_NORMAL_MAP.getTileLayers()[0].getTileUrl(a,b);
    }  
    // ============================================================
 
                              if (GBrowserIsCompatible()) {
 var center = new GLatLng(<?php echo $GeoPos['lat']; ?>, <?php echo $GeoPos['long']; ?>);
 var SobiGeoMap = new GMap2(document.getElementById("sobi2GoogleMaps"));
 
 // Определяем тип карты
            SobiGeoMap.addMapType(G_PHYSICAL_MAP);
 
         // определяем элементы управления картой
           SobiGeoMap.addControl(new GLargeMapControl());
 
           SobiGeoMap.enableScrollWheelZoom();
           SobiGeoMap.enableContinuousZoom();
 
           // Создаем copyright collection
            var copyCollection = new GCopyrightCollection('nn-map');
            var copyright = new GCopyright(1, new GLatLngBounds(new GLatLng(56.1700230, 43.6816406), new GLatLng(56.4260545, 44.1430664)), 0, "Created by Ugolnikov Sergey");
            copyCollection.addCopyright(copyright);
 
            //Определяем слой нашей карты
            var tilelayers = new Array();
            tilelayers[0] = G_NORMAL_MAP.getTileLayers()[0];
            tilelayers[1] = new GTileLayer(copyCollection, 11, 18 );
            tilelayers[1].getTileUrl = CustomGetTileUrl
            tilelayers[1].getOpacity = function () {return 1.00;};//of the non transparent part
            tilelayers[1].isPng = function() {return false;}; 
 
            // Устанавливаем параметры для нашего слоя карты
            var GMapTypeOptions = new Object();
            GMapTypeOptions.minResolution = 11;
            GMapTypeOptions.maxResolution = 18;
            GMapTypeOptions.errorMessage = "No map data available";
 
             //Создаем пользовательский слой
            var custommap = new GMapType(tilelayers, new GMercatorProjection(22), "nn-map", GMapTypeOptions);
            custommap.getTextColor = function() {return "#000000";};
            SobiGeoMap.addMapType(custommap);
            SobiGeoMap.setCenter(center, <?php echo $config->googleMapsZoom; ?>, custommap );
 
           //Определяем метку
           var marker = new GMarker(center);
 
        //Определяем обработчик события при клике на метке
         GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml('<div style="text-align:center; width: 200px; "><strong><?php echo $title; ?></strong></div>');
        });
 
         //Добавляем метку на карту
         SobiGeoMap.addOverlay (marker);
 
        }
 
 
 
    //]]>
    </script>
 
<?php
		}
		elseif ((strlen(trim($GeoPos['lat'])) && strlen(trim($GeoPos['long']))) && (!is_numeric($GeoPos['lat']) || !is_numeric($GeoPos['lat']))) {
			trigger_error("HTML_SOBI::showGoogleMaps(): Given cooordinates ({$GeoPos['lat']}, {$GeoPos['long']}) are not correct. Please enter float values");
		}

Здесь код функции похож на код файла nn-map.html с двумя отличиями.

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

Мы центр карты помечаем меткой, при клике по которой открывается балун с названием соответствующей записи.

После этого сохраняем измененный файл.

Открываем запись с картой и наблюдаем нашу карту с меткой расположения, щелкнув по которой мы видим балун с надписью: «Победа, развлекательный комплекс».

Все работает нормально.

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

Не много позже я расскажу, как можно сделать инструмент для определения координат на карте Google Maps, а также как можно использовать его для определения координат объектов на своей карте.

Используем свою карту вместе с компонентом SOBI2 для Joomla: 1 комментарий

  1. Уведомление: flu-swine.ru

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

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