?>

Création de revendeurs et ajout de leurs coordonnées sur la carte yandex

Création de revendeurs et ajout de leurs coordonnées sur la carte yandex

Une tâche très fréquente consiste à créer des objets ayant leurs propres coordonnées et devant être mappés sur une carte yandex ou google. Prenons un exemple concret sur la façon de procéder en 15 minutes sur le CMS SkeekS.

Очень частой задачей является создание каких-либо объектов, которые имеют свои координаты и их необходимо наносить на карту yandex или google. Давайте разберем на конкретном примере, как это сделать за 15 минут на SkeekS CMS.

В данной статье разберем пример решения данной задачи на SkeekS CMS, опираясь на ее встроенные возможности и модули. Будем реализовывать список дилеров для конкретного сайта.

Для начала работы необходимо поставить модуль http://marketplace.cms.skeeks.com/solutions/instrumentyi/razrabotchiku/228-cms-ya-map

Рабочий пример сразу же можно посмотреть тут: http://stevita.ru/dealers

Итак, начнем.


1) Создаем контент "Дилеры"

Используя возможности SkeekS CMS создаем контент дилеры, и свойство координаты на yandex картах.

 

 

Отлично, теперь создаем первого дилера:


2) Создаем раздел "Дилеры" и задем ему свой шабло для отрисовки

 


3) Программирование шаблона

Теперь самое интересное - программирование.

Рисуем карту Yandex используя виджет:

<? $yaMap = \skeeks\cms\ya\map\widgets\YaMapWidget::begin([
    'options' =>
    [
        'class' => 'sx-map',
        'style' => 'height: 600px;'
    ]
]) ?>
    <? $yaMap->setZoom()->setCenter()->setControlls([
        'fullscreenControl', 'typeSelector', 'rulerControl', 'routeEditor', 'searchControl', 'zoomControl'
    ]); ?>
<? \skeeks\cms\ya\map\widgets\YaMapWidget::end() ?>

 

Ищем дилеров:

Находим элементы контента и формируем нужный нам массив данных:

<?

$query = \skeeks\cms\models\CmsContentElement::find()
            ->joinWith('cmsContent content')
            ->joinWith('cmsContentElementProperties map')
            ->joinWith('cmsContentProperties contentProp')
            ->with('images')
            ->with('image')
            ->with('createdBy')
            ->with('createdBy.image')
            ->with('parentContentElement')
            ->with('parentContentElement.image')
            ->andWhere(["content.code" => "dealer"])
        ;

$result = [];
$models = $query->all();
foreach ($models as $model)
{
    $coordinatesString = $model->relatedPropertiesModel->getAttribute('coordinates');
    if ($coordinatesString)
    {
        $coordinates = explode(",", $coordinatesString);
        $coordinates[0] = (float) $coordinates[0];
        $coordinates[1] = (float) $coordinates[1];

        /**
         * @var $model \skeeks\cms\models\CmsContentElement
         */
        $result[] = \yii\helpers\ArrayHelper::merge( $model->toArray($model->fields(), $model->extraFields()), [
            'coordinates' => $coordinates,
            'url'           => $model->url,

            'phone'         => $model->relatedPropertiesModel->getAttribute('phone'),
            'email'         => $model->relatedPropertiesModel->getAttribute('email'),
            'address'       => $model->relatedPropertiesModel->getAttribute('address'),
        ]);
    }
}

 

Формируем Json массив для javascript:

$js = \yii\helpers\Json::encode([
    'models' => $result
]);

 

Пишем js для нанесения меток на карту:

(function(sx, $, _)
{
    sx.classes.YaPluginDealers = sx.classes.ya.plugins._Base.extend({

        _initOnReady: function () {

            var self = this;
            this._initCluster();
            this.addObjects(self.get('models'));
        },

        _initCluster: function()
        {
            var self = this;

            this.Cluster = new ymaps.Clusterer();
            self.MapObject.YaMap.geoObjects.add(this.Cluster);
            self.MapObject.YaMap.behaviors.disable('scrollZoom');

            return this;
        },


        /**
         * @param object
         * @returns {string}
         */
        getObjectBalloonTemplate: function(object) {
            return '' +
                '<div class="balloon-content">' +
                    '<p class="fs14 strong mb-5"><a target="_blank" href="' + object.url + '">' + object.name + '</a></p>' +
                    '<p class="fs14 strong mb-5">тел.:' + object.phone + '</p>' +
                    '<p class="fs14 strong mb-5">E-mail:' + object.email + '</p>' +
                    '<p class="fs14 strong mb-5">Адрес:' + object.address + '</p>' +
                    '<div class="clearfix"></div>' +
                '</div>' +
                '<a target="_blank" href="' + object.url + '">Подробнее &raquo;</a>';
        },

        /**
        * @param models
        */
        addObjects: function (models)
        {
            var self = this;
            var objects = models;

            var balloonContentLayout = ymaps.templateLayoutFactory.createClass(
                '$[properties.balloonContent]'
            );

            _.each(objects, function(object, i)
            {
                if (object.coordinates)
                {
                    var ObjectPlacemark = new ymaps.Placemark(object.coordinates, {
                        objectId: object.id,
                        //balloonContentHeader: object.name,
                        balloonContent: self.getObjectBalloonTemplate(object),
                        hintContent: object.name
                    }, {});

                    self.Cluster.add(ObjectPlacemark);
                }
            });
        }
    });

    new sx.classes.YaPluginDealers(sx.yaMaps.get('{$yaMap->id}'), {$js});
})(sx, sx.$, sx._);

 

Tous les commentaires (0)
Sans commentaires