yandex maps

mirzaev/skillparts/system/controllers/PartnersController.php

@@ -6,10 +6,13 @@ namespace app\controllers;
 
 use yii\web\Controller;
 
+use app\models\Terminal;
+
 class PartnersController extends Controller
 {
     public function actionIndex()
     {
-        return $this->render('/partners/index');
+        $terminals = Terminal::read(500);
+        return $this->render('/partners/index', compact('terminals'));
     }
 }

mirzaev/skillparts/system/models/Document.php

@@ -142,12 +142,22 @@ abstract class Document extends ActiveRecord
 
     /**
      * Чтение всех записей
+     * 
+     * @deprecated
      */
     public static function readAll(): array
     {
         return static::find()->all();
     }
 
+    /**
+     * Чтение записей по максимальному ограничению
+     */
+    public static function read(int $limit = 100): array
+    {
+        return static::find()->limit($limit)->all();
+    }
+
     /**
      * Чтение количества записей
      */

mirzaev/skillparts/system/views/partners/index.php

@@ -1,11 +1,34 @@
 <link href="/css/pages/partners.css" rel="stylesheet">
+<script src="https://api-maps.yandex.ru/2.1/?apikey=ff21ed7c-2d34-4f91-8d7f-2144ec3e4397&lang=ru_RU" type="text/javascript"></script>
 
 <div id="page_partners" class="container mb-auto py-3">
     <article class="py-3 rounded">
         <div class="rounded overflow-hidden">
-            <iframe width="100%" height="400" src="https://maps.google.com/maps?width=800&amp;height=300&amp;hl=ru&amp;q=%D0%A5%D0%B0%D0%B1%D0%B0%D1%80%D0%BE%D0%B2%D1%81%D0%BA%20%D0%9F%D1%80%D0%BE%D0%BC%D1%8B%D1%88%D0%BB%D0%B5%D0%BD%D0%BD%D0%B0%D1%8F%203+(SkillParts)&amp;ie=UTF8&amp;t=&amp;z=13&amp;iwloc=B&amp;output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>
+            <!-- @deprecated -->
+            <!-- <iframe width="100%" height="400" src="https://maps.google.com/maps?width=800&amp;height=300&amp;hl=ru&amp;q=%D0%A5%D0%B0%D0%B1%D0%B0%D1%80%D0%BE%D0%B2%D1%81%D0%BA%20%D0%9F%D1%80%D0%BE%D0%BC%D1%8B%D1%88%D0%BB%D0%B5%D0%BD%D0%BD%D0%B0%D1%8F%203+(SkillParts)&amp;ie=UTF8&amp;t=&amp;z=13&amp;iwloc=B&amp;output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe> -->
+
+            <div class="wrapper">
+                <div id="cityShop" class="cityShop">
+                    <label for="cities" class="label">Выбор города</label>
+                    <input type="text" id="suggest" value="Поиск города">
+                    <div name="cities" id="cities">
+                        <!-- <ul id="shops" class="shops"></ul> -->
+                    </div>
+                </div>
+
+                <div id="map"></div>
+            </div>
+
             <div class="p-4">
             </div>
         </div>
+        <!-- <pre>
+        <?php
+            // var_dump($terminals);
+        ?>
+        </pre> -->
     </article>
 </div>
+
+<script src="/js/yandex/ymap.js" defer></script>
+<script src="/js/yandex/provider.js" defer></script>

mirzaev/skillparts/system/web/css/pages/partners.css

@@ -0,0 +1,64 @@
+.wrapper {
+    display: flex;
+    justify-content: space-between;
+}
+
+/* Выбор города */
+.label {
+    text-align: center;
+    font-weight: bold;
+
+    max-width: 240px;
+    width: 100%;
+    padding: 4px 0;
+
+    color: azure;
+    background-color: #123EAB;
+
+    position: fixed;
+}
+
+/* Блок городов */
+.cityShop {
+    width: 240px;
+    height: 400px;
+
+    background-color: #fff;
+
+    overflow-y: scroll;
+
+}
+
+.cityShop::-webkit-scrollbar {
+    width: 5px;
+  }
+
+  .cityShop::-webkit-scrollbar-thumb {
+    background-color: #123EAB;
+    border: 20px solid transparent;
+  }
+
+
+.goto {
+    display: block;
+    text-decoration: none;
+
+    margin-left: 25px;
+    margin-top: 12px;
+    margin-bottom: 5px;
+    color: black;
+
+    max-width: 190px;
+}
+
+.goto:hover {
+    font-weight: bold;
+    border-bottom: 2px solid #123EAB;
+}
+
+/* Карта */
+#map {
+    max-width: 850px;
+    width: 100%;
+    height: 400px;
+}

mirzaev/skillparts/system/web/js/yandex/provider.js

@@ -0,0 +1,96 @@
+    // Список городов и филиалов в них
+    var shopList = [
+        {
+            'cityName': 'Архангельск',
+            'shops': [
+                {'coordinates': [64.539304,	40.518735], 'name': 'Рязанский проспект, 6Ас21'},
+            ]
+        },
+        {
+            'cityName': 'Владивосток',
+            'shops': [
+                {'coordinates': [43.134019,	131.928379], 'name': 'Рязанский проспект, 6Ас21'},
+            ]
+        },
+        {
+            'cityName': 'Екатеринбург',
+            'shops': [
+                {'coordinates': [56.838002,	60.597295], 'name': 'Будапештская улица, 36к2'},
+            ]
+        },
+        {
+            'cityName': 'Калининград',
+            'shops': [
+                {'coordinates': [55.916229,	37.854467], 'name': 'Будапештская улица, 36к2'},
+            ]
+        },
+        {
+            'cityName': 'Краснодар',
+            'shops': [
+                {'coordinates': [59.99486277158917, 30.406505207030918], 'name': 'проспект Непокорённых'},
+            ]
+        },
+        {
+            'cityName': 'Красноярск',
+            'shops': [
+                {'coordinates': [59.863210042666125, 30.37903938671841], 'name': 'Будапештская улица, 36к2'},
+                {'coordinates': [59.99486277158917, 30.406505207030918], 'name': 'проспект Непокорённых'}
+            ]
+        },
+        {
+            'cityName': 'Комосомольск-на-Амуре',
+            'shops': [
+                {'coordinates': [50.54986,	137.007867], 'name': 'Будапештская улица, 36к2'},
+            ]
+        },
+        {
+            'cityName': 'Москва',
+            'shops': [
+                {'coordinates': [55.72532368326033, 37.748675112058876], 'name': 'Рязанский проспект, 6Ас21'},
+            ]
+        },
+        {
+            'cityName': 'Мурманск',
+            'shops': [
+                {'coordinates': [68.96956299999999,	33.07454], 'name': 'Будапештская улица, 36к2'},
+            ]
+        },
+        {
+            'cityName': 'Находка',
+            'shops': [
+                {'coordinates': [59.863210042666125, 30.37903938671841], 'name': 'Будапештская улица, 36к2'},
+            ]
+        },
+        {
+            'cityName': 'Новосибирск',
+            'shops': [
+                {'coordinates': [55.028739,	82.90692799999999], 'name': 'Будапештская улица, 36к2'},
+            ]
+        },
+        {
+            'cityName': 'Омск',
+            'shops': [
+                {'coordinates': [54.989342,	73.368212], 'name': 'Будапештская улица, 36к2'},
+            ]
+        },
+        {
+            'cityName': 'Санкт-Петербург',
+            'shops': [
+                {'coordinates': [59.863210042666125, 30.37903938671841], 'name': 'Будапештская улица, 36к2'},
+                {'coordinates': [59.99486277158917, 30.406505207030918], 'name': 'проспект Непокорённых'}
+            ]
+        },
+        {
+            'cityName': 'Сочи',
+            'shops': [
+                {'coordinates': [59.863210042666125, 30.37903938671841], 'name': 'Будапештская улица, 36к2'},
+                {'coordinates': [59.99486277158917, 30.406505207030918], 'name': 'проспект Непокорённых'}
+            ]
+        },
+        {
+            'cityName': 'Хабаровск',
+            'shops': [
+                {'coordinates': [48.486518, 135.115512], 'name': 'Промышленная, 3'},
+            ]
+        },
+    ];

mirzaev/skillparts/system/web/js/yandex/ymap.js

@@ -0,0 +1,77 @@
+// Функция ymaps.ready() будет вызвана, когда
+    // загрузятся все компоненты API, а также когда будет готово DOM-дерево.
+    var myMap;
+    var placemarkCollections = {};
+    var placemarkList = {};
+     
+
+     
+    ymaps.ready(init);
+     
+    function init() {
+     
+        // Создаем карту
+        myMap = new ymaps.Map("map", {
+            center: [48.486518, 135.115512],
+            zoom: 15,
+            controls: [
+                'zoomControl'
+            ],
+            zoomMargin: [20]
+        });
+
+        // var suggestView1 = new ymaps.SuggestView('suggest', { results: 3});
+
+        for (var i = 0; i < shopList.length; i++) {
+     
+            // Добавляем название города в список
+            $('div#cities').append('<a href="#" id="goto" class="goto" data-goto= ' + i + ' title=' + shopList[i].cityName + '>' + shopList[i].cityName + '</a>')  
+
+            // Создаём коллекцию меток для города
+            var cityCollection = new ymaps.GeoObjectCollection();
+     
+            for (var c = 0; c < shopList[i].shops.length; c++) {
+                var shopInfo = shopList[i].shops[c];
+     
+                var shopPlacemark = new ymaps.Placemark(
+                    shopInfo.coordinates,
+                    {
+                        hintContent: shopInfo.name,
+                        balloonContent: shopInfo.name,
+                    },
+                );
+     
+                if (!placemarkList[i]) placemarkList[i] = {};
+                placemarkList[i][c] = shopPlacemark;
+     
+                // Добавляем метку в коллекцию
+                cityCollection.add(shopPlacemark);
+     
+            }
+     
+            placemarkCollections[i] = cityCollection;
+     
+            // Добавляем коллекцию на карту
+            myMap.geoObjects.add(cityCollection);
+     
+        }
+        
+    }
+     
+    // Переключение города
+    $('div#cities').on('click', 'a#goto', function () {
+        var cityId = $(this).attr('data-goto');
+     
+        // Масштабируем и выравниваем карту так, чтобы были видны метки для выбранного города
+        myMap.setBounds(placemarkCollections[cityId].getBounds(), {checkZoomRange:true}).then(function(){
+            if(myMap.getZoom() > 15) myMap.setZoom(15); // Если значение zoom превышает 15, то устанавливаем 15.
+        });
+     
+        // Добавление списка филиалов определенного города
+        // $('#shops').html('');
+        // for (var c = 0; c < shopList[cityId].shops.length; c++) {
+        //     $('#shops').append('<li value="' + c + '">' + shopList[cityId].shops[c].name + '</li>');
+        // }
+     
+    });
+