Blame view
resources/views/mapsobj.blade.php
25.3 KB
242debab8
Первый коммит в п...
|
1 |
@extends('layout.site', ['title' => 'Объекты на карте RentTorg'])
|
8634eac35
Картинки обновлен...
|
2 3 4 5 6 7 |
@section('filter')
@include('part.filter.mapsobj')
@endsection
@section('custom_js')
@include('js.filter_value')
|
|
694201330
Добавление коорди...
|
8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<script>
function setGeneralMap() {
if (document.querySelector('#general-map')) {
ymaps.ready(init); // Дождёмся загрузки API и готовности DOM;
function init() {
const myMap = new ymaps.Map('general-map', { // Создание экземпляра карты и его привязка к контейнеру с заданным id;
center: [55.752933963675126, 37.52233749962665], // При инициализации карты обязательно нужно указать её центр и коэффициент масштабирования;
zoom: 10,
controls: [] // Скрываем элементы управления на карте;
});
// Создаём макет содержимого.
const MyIconContentLayout = ymaps.templateLayoutFactory.createClass(
'<div style="color: #FFFFFF; font-weight: bold;">$[properties.iconContent]</div>'
);
let collection = new ymaps.GeoObjectCollection(null, { // Создаём коллекцию, в которую будемпомещать метки (что-то типа массива);
// preset: 'islands#yellowIcon'
});
let collectionCoords = [ // Создаём массив с координатами (координаты должны располагаться в том же порядке, что и адреса в списке на сайте);
|
|
0b9fba095
Карта на странице...
|
33 34 35 36 37 38 39 40 |
@if (!empty($input))
@if ($houses->count())
@foreach ($houses as $house)
[{{ $house->coord_x }}, {{$house->coord_y}}],
@endforeach
@endif
@else
@if ($areas->count())
|
|
694201330
Добавление коорди...
|
41 42 43 44 |
@foreach ($areas as $area)
[{{ $area->coord_x }}, {{$area->coord_y}}],
@endforeach
@endif
|
|
0b9fba095
Карта на странице...
|
45 |
@endif |
|
694201330
Добавление коорди...
|
46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 |
// [55.867783219108354, 37.392867499999916],
// [55.728043075486504, 37.73937949999994],
// [55.72624100423305, 37.476078499999964],
// [55.80751105044832, 37.449622999999974],
// [55.601783098948836, 37.36700499999998],
// [55.86086502152225, 37.540348999999964],
// [55.784961528728715, 37.56188599999996],
// [55.63910010399773, 37.319407999999996],
// [55.55819256767507, 37.55711549999994],
// [55.79829252928473, 37.52063549999999],
];
for (let i = 0, l = collectionCoords.length; i < l; i++) { // C помощью цикла добавляем все метки в коллекцию;
collection.add(new ymaps.Placemark(collectionCoords[i]));
collection.get(i).properties.set('iconContent', `${i + 1}`); // Добавляем каждой метке порядковый номер, записываем его в свойство 'iconContent';
}
myMap.geoObjects.add(collection); // Добавляем коллекцию с метками на карту;
collection.options.set('iconLayout', 'default#imageWithContent'); // Необходимо указать данный тип макета;
collection.options.set('iconImageHref', 'images/mark-complex.svg'); // Своё изображение иконки метки;
collection.options.set('iconImageSize', [52, 67]); // Размеры метки;
collection.options.set('iconImageOffset', [-26, -67]); // Смещение левого верхнего угла иконки относительно её "ножки" (точки привязки);
collection.options.set('iconContentOffset', [0, 17]);
collection.options.set('iconContentLayout', MyIconContentLayout); // Смещение левого верхнего угла иконки относительно её "ножки" (точки привязки);
const pageMapBar = document.querySelector('.js_page_map_bar');
const pageMapBarBtn = pageMapBar.querySelector('.js_page_map_bar_btn');
const pageMapBarList = pageMapBar.querySelector('.js_page_map_bar_list');
const pageMapBarCards = pageMapBar.querySelectorAll('.card-news');
const showCard = (i) => {
pageMapBarCards.forEach((card, k) => {
card.classList.remove('active');
if (i == k) {
card.classList.add('active');
}
});
};
const hidecard = () => {
pageMapBarCards.forEach(card => {
card.classList.remove('active');
});
}
let pageMapBarItems;
pageMapBarBtn.addEventListener('click', () => {
pageMapBar.classList.toggle('active');
});
pageMapBarList.addEventListener('click', (e) => {
if (e.target.closest('.page-map-bar__item')) {
pageMapBarItems = pageMapBarList.querySelectorAll('.page-map-bar__item');
pageMapBarItems.forEach((item, i) => {
if (e.target == item && e.target.classList.contains('active')) {
item.classList.remove('active');
hidecard();
} else if (e.target == item) {
pageMapBarItems.forEach(item => {
item.classList.remove('active');
});
item.classList.add('active');
let offsetCoords = collection.get(i).geometry.getCoordinates();
offsetCoords = [
offsetCoords[0] - 0.0025,
offsetCoords[1]
];
myMap.setZoom(16);
// myMap.setCenter(collection.get(i).geometry.getCoordinates());
myMap.setCenter(offsetCoords);
showCard(i);
}
});
}
});
collection.events.add('click', function (e) {
for (let i = 0, l = collection.getLength(); i < l; i++) {
if (e.get('target') == collection.get(i)) {
pageMapBarItems = pageMapBarList.querySelectorAll('.page-map-bar__item');
pageMapBarItems.forEach((item) => {
pageMapBar.classList.add('active');
item.classList.remove('active');
});
pageMapBarItems[i].classList.add('active');
showCard(i);
}
}
});
}
}
}
setGeneralMap();
</script>
|
|
8634eac35
Картинки обновлен...
|
178 |
@endsection |
|
242debab8
Первый коммит в п...
|
179 |
@section('content')
|
|
242debab8
Первый коммит в п...
|
180 181 182 183 184 185 186 187 188 189 190 191 192 193 |
<section class="page-map">
<div class="page-map__wrap">
<h2 class="visually-hidden">Карта</h2>
<div class="page-map__map" id="general-map"></div>
<div class="container">
<div class="page-map__inner">
<div class="page-map-bar js_page_map_bar active">
<div class="page-map-bar__top">Все объекты
<button class="page-map-bar__close js_page_map_bar_btn" type="button">
<svg width="20" height="20">
<use xlink:href="images/sprite.svg#popup-close"></use>
</svg>
</button>
</div>
|
|
0b9fba095
Карта на странице...
|
194 195 196 197 198 199 200 201 202 203 204 205 |
@if (!empty($input))
<ul class="page-map-bar__list js_page_map_bar_list">
@if ($houses->count())
@foreach ($houses as $house)
<li class="page-map-bar__item">{{ $house->title }}</li>
@endforeach
@endif
</ul>
@if ($houses->count())
@foreach ($houses as $house)
<div class="card-news">
|
|
5fc27fa4a
Отправка писем на...
|
206 207 |
<div class="card-news__top">
<img src="/storage/app/public/<?=$house->foto_main;//=asset(Storage::url($house->foto_main)) ?>" alt="Превью по {{$house->title}}" loading="lazy">
|
|
0b9fba095
Карта на странице...
|
208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 |
<div class="card-news__date"><span>{{ $house->title }}</span><span></span></div>
</div>
<div class="card-news__cnt">
<p class="card-news__descr">{{ $house->description_house }}</p>
<a class="card-news__link" href="{{ route('offer', ['house' => $house->id]) }}">Подробнее
<svg width="17" height="12">
<use xlink:href="{{ asset('images/sprite.svg#card-news-link-arrow') }}"></use>
</svg>
</a>
</div>
</div>
@endforeach
@endif
@else
<ul class="page-map-bar__list js_page_map_bar_list">
@if ($areas->count())
|
|
694201330
Добавление коорди...
|
224 225 226 |
@foreach ($areas as $area)
<li class="page-map-bar__item">{{ $area->name_area }}</li>
@endforeach
|
|
0b9fba095
Карта на странице...
|
227 |
@endif |
|
694201330
Добавление коорди...
|
228 |
<!--<li class="page-map-bar__item">ЖК Большое Путилково</li> |
|
242debab8
Первый коммит в п...
|
229 230 231 232 233 234 235 236 |
<li class="page-map-bar__item">ЖК Среда</li>
<li class="page-map-bar__item">ЖК Квартал Триумфальный</li>
<li class="page-map-bar__item">ЖК Алые Паруса</li>
<li class="page-map-bar__item">ЖК Первый Московский</li>
<li class="page-map-bar__item">ЖК Ильменский 17</li>
<li class="page-map-bar__item">ЖК Царская Площадь</li>
<li class="page-map-bar__item">ЖК Переделкино Ближнее</li>
<li class="page-map-bar__item">ЖК Этолон Cити</li>
|
|
694201330
Добавление коорди...
|
237 |
<li class="page-map-bar__item">ЖК Триумф Палас</li>--> |
|
0b9fba095
Карта на странице...
|
238 239 |
</ul>
@if ($areas->count())
|
|
694201330
Добавление коорди...
|
240 241 |
@foreach ($areas as $area)
<div class="card-news">
|
|
5fc27fa4a
Отправка писем на...
|
242 |
<div class="card-news__top"><img src="/storage/app/public/<?=$area->foto_main; //asset(Storage::url($area->foto_main))?>" alt="Превью по {{$area->name_area}}" loading="lazy">
|
|
694201330
Добавление коорди...
|
243 244 245 246 247 248 249 250 251 252 253 254 |
<div class="card-news__date"><span>{{ $area->name_area }}</span><span></span></div>
</div>
<div class="card-news__cnt">
<p class="card-news__descr">{{ $area->description }}</p>
<a class="card-news__link" href="{{ route('complex', ['area' => $area->id]) }}">Подробнее
<svg width="17" height="12">
<use xlink:href="{{ asset('images/sprite.svg#card-news-link-arrow') }}"></use>
</svg>
</a>
</div>
</div>
@endforeach
|
|
0b9fba095
Карта на странице...
|
255 |
@endif |
|
694201330
Добавление коорди...
|
256 257 |
@endif
<!--<div class="card-news">
|
|
242debab8
Первый коммит в п...
|
258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 |
<div class="card-news__top"><img src="images/card/card-img-5.jpg" alt="Превью к новости" loading="lazy">
<div class="card-news__date"><span>ЖК Большое Путилково</span><span></span></div>
</div>
<div class="card-news__cnt">
<p class="card-news__descr">Помещение расположено на первой фасадной линии Лесной улицы. В нескольких минутах пешком от метро «Белорусская», Бизнес центра класса «А» «Белая площадь», напротив гостиницы «Holiday Inn» и рядом с фудмоллом</p><a class="card-news__link" href="#">Подробнее
<svg width="17" height="12">
<use xlink:href="images/sprite.svg#card-news-link-arrow"></use>
</svg></a>
</div>
</div>
<div class="card-news">
<div class="card-news__top"><img src="images/card/card-img-6.jpg" alt="Превью к новости" loading="lazy">
<div class="card-news__date"><span>ЖК Среда</span><span></span></div>
</div>
<div class="card-news__cnt">
<p class="card-news__descr">Помещение расположено на первой фасадной линии Лесной улицы. В нескольких минутах пешком от метро «Белорусская», Бизнес центра класса «А» «Белая площадь», напротив гостиницы «Holiday Inn» и рядом с фудмоллом</p><a class="card-news__link" href="#">Подробнее
<svg width="17" height="12">
<use xlink:href="images/sprite.svg#card-news-link-arrow"></use>
</svg></a>
</div>
</div>
<div class="card-news">
<div class="card-news__top"><img src="images/card/card-img-7.jpg" alt="Превью к новости" loading="lazy">
<div class="card-news__date"><span>ЖК Квартал Триумфальный</span><span></span></div>
</div>
<div class="card-news__cnt">
<p class="card-news__descr">Помещение расположено на первой фасадной линии Лесной улицы. В нескольких минутах пешком от метро «Белорусская», Бизнес центра класса «А» «Белая площадь», напротив гостиницы «Holiday Inn» и рядом с фудмоллом</p><a class="card-news__link" href="#">Подробнее
<svg width="17" height="12">
<use xlink:href="images/sprite.svg#card-news-link-arrow"></use>
</svg></a>
</div>
</div>
<div class="card-news">
<div class="card-news__top"><img src="images/card/card-img-8.jpg" alt="Превью к новости" loading="lazy">
<div class="card-news__date"><span>ЖК Алые Паруса</span><span></span></div>
</div>
<div class="card-news__cnt">
<p class="card-news__descr">Помещение расположено на первой фасадной линии Лесной улицы. В нескольких минутах пешком от метро «Белорусская», Бизнес центра класса «А» «Белая площадь», напротив гостиницы «Holiday Inn» и рядом с фудмоллом</p><a class="card-news__link" href="#">Подробнее
<svg width="17" height="12">
<use xlink:href="images/sprite.svg#card-news-link-arrow"></use>
</svg></a>
</div>
</div>
<div class="card-news">
<div class="card-news__top"><img src="images/card/card-img-5.jpg" alt="Превью к новости" loading="lazy">
<div class="card-news__date"><span>ЖК Первый Московский</span><span></span></div>
</div>
<div class="card-news__cnt">
<p class="card-news__descr">Помещение расположено на первой фасадной линии Лесной улицы. В нескольких минутах пешком от метро «Белорусская», Бизнес центра класса «А» «Белая площадь», напротив гостиницы «Holiday Inn» и рядом с фудмоллом</p><a class="card-news__link" href="#">Подробнее
<svg width="17" height="12">
<use xlink:href="images/sprite.svg#card-news-link-arrow"></use>
</svg></a>
</div>
</div>
<div class="card-news">
<div class="card-news__top"><img src="images/card/card-img-6.jpg" alt="Превью к новости" loading="lazy">
<div class="card-news__date"><span>ЖК Ильменский 17</span><span></span></div>
</div>
<div class="card-news__cnt">
<p class="card-news__descr">Помещение расположено на первой фасадной линии Лесной улицы. В нескольких минутах пешком от метро «Белорусская», Бизнес центра класса «А» «Белая площадь», напротив гостиницы «Holiday Inn» и рядом с фудмоллом</p><a class="card-news__link" href="#">Подробнее
<svg width="17" height="12">
<use xlink:href="images/sprite.svg#card-news-link-arrow"></use>
</svg></a>
</div>
</div>
<div class="card-news">
<div class="card-news__top"><img src="images/card/card-img-7.jpg" alt="Превью к новости" loading="lazy">
<div class="card-news__date"><span>ЖК Царская Площадь</span><span></span></div>
</div>
<div class="card-news__cnt">
<p class="card-news__descr">Помещение расположено на первой фасадной линии Лесной улицы. В нескольких минутах пешком от метро «Белорусская», Бизнес центра класса «А» «Белая площадь», напротив гостиницы «Holiday Inn» и рядом с фудмоллом</p><a class="card-news__link" href="#">Подробнее
<svg width="17" height="12">
<use xlink:href="images/sprite.svg#card-news-link-arrow"></use>
</svg></a>
</div>
</div>
<div class="card-news">
<div class="card-news__top"><img src="images/card/card-img-8.jpg" alt="Превью к новости" loading="lazy">
<div class="card-news__date"><span>ЖК Переделкино Ближнее</span><span></span></div>
</div>
<div class="card-news__cnt">
<p class="card-news__descr">Помещение расположено на первой фасадной линии Лесной улицы. В нескольких минутах пешком от метро «Белорусская», Бизнес центра класса «А» «Белая площадь», напротив гостиницы «Holiday Inn» и рядом с фудмоллом</p><a class="card-news__link" href="#">Подробнее
<svg width="17" height="12">
<use xlink:href="images/sprite.svg#card-news-link-arrow"></use>
</svg></a>
</div>
</div>
<div class="card-news">
<div class="card-news__top"><img src="images/card/card-img-5.jpg" alt="Превью к новости" loading="lazy">
<div class="card-news__date"><span>ЖК Этолон Cити</span><span></span></div>
</div>
<div class="card-news__cnt">
<p class="card-news__descr">Помещение расположено на первой фасадной линии Лесной улицы. В нескольких минутах пешком от метро «Белорусская», Бизнес центра класса «А» «Белая площадь», напротив гостиницы «Holiday Inn» и рядом с фудмоллом</p><a class="card-news__link" href="#">Подробнее
<svg width="17" height="12">
<use xlink:href="images/sprite.svg#card-news-link-arrow"></use>
</svg></a>
</div>
</div>
<div class="card-news">
<div class="card-news__top"><img src="images/card/card-img-6.jpg" alt="Превью к новости" loading="lazy">
<div class="card-news__date"><span>ЖК Триумф Палас</span><span></span></div>
</div>
<div class="card-news__cnt">
<p class="card-news__descr">Помещение расположено на первой фасадной линии Лесной улицы. В нескольких минутах пешком от метро «Белорусская», Бизнес центра класса «А» «Белая площадь», напротив гостиницы «Holiday Inn» и рядом с фудмоллом</p><a class="card-news__link" href="#">Подробнее
<svg width="17" height="12">
<use xlink:href="images/sprite.svg#card-news-link-arrow"></use>
</svg></a>
</div>
|
|
694201330
Добавление коорди...
|
366 |
</div>--> |
|
242debab8
Первый коммит в п...
|
367 368 369 370 371 372 373 374 375 376 377 |
</div>
</div>
</div>
</div>
</section>
@endsection
@section('form_feedback')
<!-- Форма обратной связи -->
@include('form.form_feedback')
@endsection
|