Андрей Ларионов / Renttorg_laravel

Download as
Browse Code »

Commit b18fdfbaf2492a17d723aeb640b449ae3de5da5b

Authored by Андрей Ларионов
1 parent 8634eac35b
Exists in master

Скрипт js по поводу карты

Showing 3 changed files with 163 additions and 4 deletions Side-by-side Diff

app/Http/Controllers/MainController.php
Diff comments   View file @ b18fdfb
... ... @@ -270,7 +270,11 @@ class MainController extends Controller
270 270 * Избранное
271 271 */
272 272 public function Favorite(Request $request) {
273   - $Arr = json_decode($_COOKIE['favorite_house'], true);
  273 + if (empty($_COOKIE['favorite_house'])) {
  274 + $Arr = Array();
  275 + } else {
  276 + $Arr = json_decode($_COOKIE['favorite_house'], true);
  277 + }
274 278 if (!empty($Arr) && is_array($Arr)) {
275 279 $houses = House::with('areas')->whereIn('id', $Arr);
276 280  
... ... @@ -29,7 +29,7 @@ class App {
29 29 this.sendForm('.js_popup_sending_form_', '[data-popup="success"]');
30 30 //this.sendOffer(); //отправка предложения по e-mail;
31 31  
32   - this.setGeneralMap(); // карта на странице карт;
  32 + //this.setGeneralMap(); // карта на странице карт;
33 33 this.setComplexMap('complex-map', [55.726591050908745, 37.57244549999999], 'ЖК Садовые кварталы'); // карта на странице 'ЖК';
34 34 this.setComplexMap('offer-map', [55.70851106903402, 37.65864349999999], 'Аренда торгового помещения 321,6 м2'); // карта на странице 'Предложение';
35 35 this.setCatalogSorts(); // сортировка на странице 'каталог';
... ... @@ -1206,7 +1206,7 @@ class App {
1206 1206  
1207 1207 // карта на странице карт;
1208 1208 setGeneralMap() {
1209   -
  1209 +/*
1210 1210 if (document.querySelector('#general-map')) {
1211 1211  
1212 1212 ymaps.ready(init); // Дождёмся загрузки API и готовности DOM;
... ... @@ -1358,7 +1358,7 @@ class App {
1358 1358 }
1359 1359  
1360 1360 };
1361   -
  1361 +*/
1362 1362  
1363 1363 // аккордеон в футере
1364 1364 setFooterSpoilers() {
resources/views/mapsobj.blade.php
Diff comments   View file @ b18fdfb
... ... @@ -6,6 +6,161 @@
6 6  
7 7 @section('custom_js')
8 8 @include('js.filter_value')
  9 + <script>
  10 + setGeneralMap() {
  11 +
  12 + if (document.querySelector('#general-map')) {
  13 +
  14 + ymaps.ready(init); // Дождёмся загрузки API и готовности DOM;
  15 +
  16 + function init() {
  17 +
  18 + const myMap = new ymaps.Map('general-map', { // Создание экземпляра карты и его привязка к контейнеру с заданным id;
  19 + center: [55.752933963675126, 37.52233749962665], // При инициализации карты обязательно нужно указать её центр и коэффициент масштабирования;
  20 + zoom: 10,
  21 + controls: [] // Скрываем элементы управления на карте;
  22 + });
  23 +
  24 + // Создаём макет содержимого.
  25 + const MyIconContentLayout = ymaps.templateLayoutFactory.createClass(
  26 + '<div style="color: #FFFFFF; font-weight: bold;">$[properties.iconContent]</div>'
  27 + );
  28 +
  29 + let collection = new ymaps.GeoObjectCollection(null, { // Создаём коллекцию, в которую будемпомещать метки (что-то типа массива);
  30 + // preset: 'islands#yellowIcon'
  31 + });
  32 +
  33 + let collectionCoords = [ // Создаём массив с координатами (координаты должны располагаться в том же порядке, что и адреса в списке на сайте);
  34 + [55.867783219108354, 37.392867499999916],
  35 + [55.728043075486504, 37.73937949999994],
  36 + [55.72624100423305, 37.476078499999964],
  37 + [55.80751105044832, 37.449622999999974],
  38 + [55.601783098948836, 37.36700499999998],
  39 + [55.86086502152225, 37.540348999999964],
  40 + [55.784961528728715, 37.56188599999996],
  41 + [55.63910010399773, 37.319407999999996],
  42 + [55.55819256767507, 37.55711549999994],
  43 + [55.79829252928473, 37.52063549999999],
  44 + ];
  45 +
  46 + for (let i = 0, l = collectionCoords.length; i < l; i++) { // C помощью цикла добавляем все метки в коллекцию;
  47 + collection.add(new ymaps.Placemark(collectionCoords[i]));
  48 + collection.get(i).properties.set('iconContent', `${i + 1}`); // Добавляем каждой метке порядковый номер, записываем его в свойство 'iconContent';
  49 + }
  50 +
  51 + myMap.geoObjects.add(collection); // Добавляем коллекцию с метками на карту;
  52 +
  53 + collection.options.set('iconLayout', 'default#imageWithContent'); // Необходимо указать данный тип макета;
  54 + collection.options.set('iconImageHref', 'images/mark-complex.svg'); // Своё изображение иконки метки;
  55 + collection.options.set('iconImageSize', [52, 67]); // Размеры метки;
  56 + collection.options.set('iconImageOffset', [-26, -67]); // Смещение левого верхнего угла иконки относительно её "ножки" (точки привязки);
  57 + collection.options.set('iconContentOffset', [0, 17]);
  58 + collection.options.set('iconContentLayout', MyIconContentLayout); // Смещение левого верхнего угла иконки относительно её "ножки" (точки привязки);
  59 +
  60 + const pageMapBar = document.querySelector('.js_page_map_bar');
  61 + const pageMapBarBtn = pageMapBar.querySelector('.js_page_map_bar_btn');
  62 + const pageMapBarList = pageMapBar.querySelector('.js_page_map_bar_list');
  63 + const pageMapBarCards = pageMapBar.querySelectorAll('.card-news');
  64 +
  65 + const showCard = (i) => {
  66 +
  67 + pageMapBarCards.forEach((card, k) => {
  68 +
  69 + card.classList.remove('active');
  70 +
  71 + if (i == k) {
  72 + card.classList.add('active');
  73 + }
  74 +
  75 + });
  76 +
  77 + };
  78 +
  79 + const hidecard = () => {
  80 +
  81 + pageMapBarCards.forEach(card => {
  82 + card.classList.remove('active');
  83 + });
  84 +
  85 + }
  86 +
  87 + let pageMapBarItems;
  88 +
  89 + pageMapBarBtn.addEventListener('click', () => {
  90 + pageMapBar.classList.toggle('active');
  91 + });
  92 +
  93 + pageMapBarList.addEventListener('click', (e) => {
  94 +
  95 + if (e.target.closest('.page-map-bar__item')) {
  96 +
  97 + pageMapBarItems = pageMapBarList.querySelectorAll('.page-map-bar__item');
  98 +
  99 + pageMapBarItems.forEach((item, i) => {
  100 +
  101 + if (e.target == item && e.target.classList.contains('active')) {
  102 +
  103 + item.classList.remove('active');
  104 +
  105 + hidecard();
  106 +
  107 + } else if (e.target == item) {
  108 +
  109 + pageMapBarItems.forEach(item => {
  110 + item.classList.remove('active');
  111 + });
  112 +
  113 + item.classList.add('active');
  114 +
  115 + let offsetCoords = collection.get(i).geometry.getCoordinates();
  116 +
  117 + offsetCoords = [
  118 + offsetCoords[0] - 0.0025,
  119 + offsetCoords[1]
  120 + ];
  121 +
  122 + myMap.setZoom(16);
  123 + // myMap.setCenter(collection.get(i).geometry.getCoordinates());
  124 + myMap.setCenter(offsetCoords);
  125 +
  126 + showCard(i);
  127 +
  128 + }
  129 +
  130 + });
  131 + }
  132 +
  133 + });
  134 +
  135 + collection.events.add('click', function (e) {
  136 +
  137 + for (let i = 0, l = collection.getLength(); i < l; i++) {
  138 +
  139 + if (e.get('target') == collection.get(i)) {
  140 +
  141 + pageMapBarItems = pageMapBarList.querySelectorAll('.page-map-bar__item');
  142 +
  143 + pageMapBarItems.forEach((item) => {
  144 + pageMapBar.classList.add('active');
  145 + item.classList.remove('active');
  146 + });
  147 +
  148 + pageMapBarItems[i].classList.add('active');
  149 +
  150 + showCard(i);
  151 +
  152 + }
  153 +
  154 + }
  155 +
  156 + });
  157 +
  158 + }
  159 +
  160 + }
  161 +
  162 + };
  163 + </script>
9 164 @endsection
10 165  
11 166 @section('content')