Создание дилеров и добавление их координат на карту yandex

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

Очень частой задачей является создание каких-либо объектов, которые имеют свои координаты и их необходимо наносить на карту 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._);