
Очень частой задачей является создание каких-либо объектов, которые имеют свои координаты и их необходимо наносить на карту 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 + '">Подробнее »</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._);
-
Семенов Александр
- /
- 10 мар. 2016 г.
- /
- 0
- /
- 6461
Популярное
Релиз SkeekS CMS 5.6.5. Что нового в CMS в 2020 году?
- 29 апр. 2020 г.
Релиз SkeekS CMS 5.5.11 работает с yii2 2.0.24
- 13 авг. 2019 г.
Новые настройки модуля магазин skeeks/cms-shop 2.2.7.13
- 13 авг. 2019 г.
Как отправить форму в yii2 и skeeks cms через ajax?
- 18 апр. 2019 г.
Все комментарии (0)