Сделать стартовойДобавить в закладки  
Главная страничка Главная страничка
В номере:

    Выходит с 17 июля 2008 г. цена договорная

    Опрос

    Windows Mobile
    Symbian
    Android
    iPhone
    Linux
    другая
    не знаю
    у меня обычный телефон



    Календарь
    «    Октябрь 2009    »
    ПнВтСрЧтПтСбВс
     1234
    567891011
    12131415161718
    19202122232425
    262728293031 

    Архив новостей
    Март 2022 (1)
    Декабрь 2021 (1)
    Август 2021 (1)
    Июль 2021 (3)
    Февраль 2021 (3)
    Январь 2021 (1)

    Информация
    DLE: Прикрутим Яндекс.карты для отображения меток новостей на карте
    Web » CMS » DLE
    автор: dimon, опубликовано: 6 октября 2009

    Делал сайтик и потребовалось организовать вывод меток новостей на карту. Решил воспользоваться сервисом API Яндекс.Карты.
    Организуем эту функцию по типу модуля для DLE.


    1. Регистрируемся на яндексе.


    2. Получаем API-ключ


    3. Напишем php код модуля.

    <?php

    /*
    =====================================================
    DataLife Engine - by SoftNews Media Group
    -----------------------------------------------------
    http://dle-news.ru/
    -----------------------------------------------------
    Copyright (c) tudimon.com
    =====================================================
      Файл: yandexmap.php
    -----------------------------------------------------
    Назначение: формирование карты с обьектами из новостей c использованием
                         API Yandex.Maps
    =====================================================
    */

    // защита от хака
    if( ! defined( 'DATALIFEENGINE' ) ) {
        die( "Hacking attempt!" );
    }



    // очистим переменную, так на всякий случай :)
    $code = "";
    // запишем шапку
    $code .="<!-- Этот блок кода вставляется в тег <HEAD> (начало) -->
    <script src='http://api-maps.yandex.ru/1.0/?key=СЮДА_ВПИСАТЬ_ВАШ_API-ключ==&wizard=constructor' type='text/javascript'></script>
    <script type='text/javascript'>
        window.onload = function () {
            var map = new YMaps.Map(document.getElementById('YMapsID'));
            map.setCenter(new YMaps.GeoPoint(30.340473,59.930877), 13, YMaps.MapType.MAP); //начальная позиция карты и масштаб
            map.addControl(new YMaps.Zoom());
            map.addControl(new YMaps.ToolBar());
            map.addControl(new YMaps.TypeControl());        
            map.enableScrollZoom(); "; //включение зума колесом

    // читаем из базы новости (мне нужно отображать только новости из 3, 4 и 5 категории)
    $db->query( "SELECT id, title, date, alt_name, xfields FROM " . PREFIX . "_post WHERE category = 3 OR category = 4 OR category = 5" );
        
        $i="1";
        while ( $row = $db->get_row() ) {
            
        // *** формируем  placemark-и на карте ***
        
        // преобразуем дату для full_link
        $row['date'] = strtotime( $row['date'] );
        // линк на полную новость    
        $full_link = $config['http_home_url'] . date( 'Y/m/d/', $row['date'] ) . $row['alt_name'] . ".html";
        // сделаем массив с xfields-ами
        $xfieldsdata = xfieldsdataload( $row['xfields'] );
            
        $code .="var placemark".$i." = new YMaps.Placemark(new YMaps.GeoPoint(".$xfieldsdata['k_gps']."));
        placemark".$i.".setIconContent(\"".$row['title']."\");
            map.addOverlay(placemark".$i.");
            placemark".$i.".setBalloonContent('<img src=\"".$xfieldsdata['k_foto_pre']."\" /><br><a href=\"".$full_link."\">Полная новость</a>');";
        $i=$i+"1";    
        }
        
        $db->free();

    // запишем остальное - завершение формирования карты
    $code .= "    }
    </script>

    <!-- Этот блок кода вставляется в тег <HEAD> (конец) -->

    <!-- Этот блок кода нужно вставить в ту часть страницы, где вы хотите разместить карту (начало) -->

    <div id=\"YMapsID\" style=\"width:700px;height:700px\"></div>
    <div style=\"width:700px;text-align:right;font-family:Arial\"><a href=\"http://api.yandex.ru/maps/tools/constructor/\" style=\"color:#1A3DC1\">Создано с помощью инструментов Яндекс.Карт</a></div>
    <!-- Этот блок кода нужно вставить в ту часть страницы, где вы хотите разместить карту (конец) -->";
        
    // подгрузим шаблон
    $tpl->load_template('yandexmap.tpl');
    //
    $tpl->set('{code}',$code);
    $tpl->compile( 'content' );
    $tpl->clear();

    ?>


    В sql-запросе Вам нужно читать только нужные поля новости.
    Я хранил в дополнительных полях $xfieldsdata['k_gps'] - географическое координаты, а в $xfieldsdata['k_foto_pre'] - фотографию-превью новости.

    На сайте я использовал ЧПУ Тип 2 (ссылки на полную новость будут иметь вид http://site.ru/категория/подкатегория/id-имя новости.html) и менять его не собираюсь, поэтому формирование $full_link заточено под этот тип ЧПУ. Если Вы используете другой, то как сформировать $full_link Вы можете подсмотреть в файле /engine/modules/show.full.php.

    Строка placemark.setIconContent("Надпись"); задает надпись на метке отображаемой на карте.
    Строка placemark.setBalloonContent("Надпись"); задает содержимое всплывающего балуна, который отображается при щелчке по метке на карте. В него я помещаю картинку-превью и ссылку на полную новость.


    4. Создаем файл tpl для модуля.

    <table width="100%">
        <tr>
            <td class="news" align="center" valign="top">{code}</td>
        </tr>
    </table>


    Здесь {code} - переменная в которую модуль записывает карту с метками.
    Файл кладем в папку с нашим шаблоном.


    5. Регистрируем модуль в движке.

    Открываем файл /engine/engine.php.

    Находим строку:

        case "feedback" :
            include ENGINE_DIR . '/modules/feedback.php';
            break;


    после нее добавляем описание нашего модуля:

        case "yandexmap" :
            include ENGINE_DIR . '/modules/yandexmap.php';
            break;


    Эти блоки кода описывают реакцию движка на разные параметры, указанные в адресной строке после index.php?do=, а точнее - какой модуль подгружать.
    Т.е. если теперь написать в адресной строке index.php?do=yandexmap, то система подгрузит наш модуль и отобразит карту.


    6. Делаем ссылку, нажав на которую, пользователь попадет на страничку с нашей картой.

    <a href="/index.php?do=yandexmap">новости на карте</a>


    Пример на сайте a-rent-spb.ru



    added later:

    Кстати, можно не запариваться с написанием модуля.
    Как вариант код, формирующий карту, нужно запихать прямо в файл fullstory.tpl

    Для этого в файл fullstory.tpl в место где нам нужно отобразить карту вставляем код:

    [xfgiven_координаты]

    <script src='http://api-maps.yandex.ru/1.0/?key=СЮДА_ВПИСАТЬ_ВАШ_API-ключ==&wizard=constructor' type='text/javascript'></script>
    <script type='text/javascript'>
        window.onload = function () {
            var map = new YMaps.Map(document.getElementById('YMapsID'));
            map.setCenter(new YMaps.GeoPoint([xfvalue_координаты]), 13, YMaps.MapType.MAP);
            map.addControl(new YMaps.Zoom());
            map.addControl(new YMaps.ToolBar());
            map.addControl(new YMaps.TypeControl());        
            map.enableScrollZoom();

    var placemark1 = new YMaps.Placemark(new YMaps.GeoPoint([xfvalue_координаты]));
            placemark1.setIconContent("надпись метки");
            map.addOverlay(placemark1);
            placemark1.setBalloonContent("расширенное описание");
            
        }
    </script>

    <!-- Этот блок кода нужно вставить в ту часть страницы, где вы хотите разместить карту (начало) -->

    <div id="YMapsID" style="width:700px;height:700px"></div>
    <div style="width:700px;text-align:right;font-family:Arial"><a href="http://api.yandex.ru/maps/tools/constructor/" style="color:#1A3DC1">Создано с помощью инструментов Яндекс.Карт</a></div>
    <!-- Этот блок кода нужно вставить в ту часть страницы, где вы хотите разместить карту (конец) -->

    [/xfgiven_координаты]


    В этом случае если для новости задано дополнительное поле xfvalue_координаты на страничке с полной новостью будет отображаться карта с Вашей меткой.


    Ну вроде бы все.
    Замечания, коментарии?

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

    Другие новости по теме:

  • DLE: Как сделать для разных разделов свой вывод
  • DLE хаки: Добавим краткое описание и картинку в topnews
  • DLE: Как создать модуль или как я делал дополнительную форму обратной связи
  • Карта Татарстана для программы Яndex.карты
  • Карты Украины для программы Яndex.карты


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

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

    #1 написал: Dr.Dead (27 февраля 2011 22:49)
    Версия DLE 9.2. При запуске ссылки пишет, что нет прав на исполнение на сервере.
    И можно ли это прикрутить на стат. страницу?
    В пхп не силен.
    #2 написал: dimon (28 февраля 2011 09:55)
    Dr.Dead, на 9.2 еще не проверял - все не найти время для обновления. но там какие то изменения были по безопасности - возможно как раз отключили возможность исполнение стороннего кода.
    В статику можно добавить как написано после added later
    Но нужно статическую страничку набирать тогда в чистом HTML - переключается галочка в Исходный текст HTML без фильтрации и изменений после поля для ввода текста статьи


     
    Информация
     
    Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.


    Поиск по сайту:


    Облако тегов
    Arduino, backup, CentOS, cmd, div, DLE, DLE хаки, domoticz, dzvents, event, Home Assistant, Linux, log, LUA, Monster, ogf3, RDP, Template, VBS, w2k8, windows, WSH, бумага, бумажный самолетик, верстка, иструкция, Карты, кино, Навигация, оригами, программа, рецензия, рецепт, скрипт, уведомления, фигуры, шаблон, Яндекс, яндекс-карты

    Показать все теги
    Реклама
    раскрутка сайта бесплатно
    Главная страница | Регистрация | Добавить новость | Новое на сайте | Статистика | Поддержка | Правила ресурса Copyright © 2005-2021 by dimon - all right reserved!
    Тираж:           экземпляров.   Дизайн, верстка by dimon