https://map.oohdesk.ru/assets/a12f42a5/js/map-test-espar.js?v=1571134011

1/**
2 * Инициализация карты (точка входа)
3 */
4function initMapMushroomGisEspar() {
5
6    // Создать объект карты GooglMaps
7    var map = new google.maps.Map(document.getElementById('map'), {
8        center: {lat: 55.7522200, lng: 37.6155600},
9        zoom: 9,
10        mapTypeId: google.maps.MapTypeId.TERRAIN,
11        gestureHandling: 'greedy'
12    });
13
14    // Создать объект для работы с картами (Библиотека Mushroom Gis)
15    var mapWrapper = mushroom.gis.MapWrapperFactory.googleMaps(map, {
16
17        /**
18         * Событие: Инициализация враппера
19         * @param {object} mapWrapper - Объект враппера карты
20         */
21        onInit: function(mapWrapper) {
22
23            // Объект активного (открытого) маркера
24            mapWrapper.param('currentOpenedItem', null);
25            // Цвет выбранного маркера
26            mapWrapper.param('markerColorSelected', '00ff00');
27            // Режим выбора маркеров
28            mapWrapper.param('selectMode', 0);
29            // Объект всплывающего окна (для маркеров)
30            mapWrapper.param('infoWindow', new google.maps.InfoWindow());
31
32            mapWrapper.param('infoWindow').addListener('closeclick', function () {
33                var currentOpenedItem = mapWrapper.param('currentOpenedItem');
34                mapWrapper.trigger('onBalloonClose', currentOpenedItem);
35            });
36
37            // При событии смены режима менять параметр режима
38            $('#select-mode').off('change').on('change', function(e) {
39                mapWrapper.param('selectMode', $(this).is(':checked') ? 1 : 0);
40            });
41
42            // Получить статус маркера
43            mapWrapper.getMarkerState = function(data) {
44                // Маркер открыт?
45                if(data.opened) {
46                    return 2;
47                }
48                // Указатель мыши наведен на маркер?
49                if(!(data.selected || data.hover)) {
50                    return 0;
51                }
52                // Маркер выделен
53                return 1;
54            };
55
56            // Возвращает URL иконки по color и state
57            mapWrapper.getIconUrl = function(color, state) {
58                return '/map/draw/marker?hexCode=' + color + '&showMode=' + state;
59            };
60
61            // Кэширование иконки
62            mapWrapper.cacheIcon = function(color, state) {
63                $img = new Image();
64                $img.src = mapWrapper.getIconUrl(color, state);
65            };
66
67            // Получить параметры иконки
68            mapWrapper.getIconParams = function(data, state) {
69                return data.actions.getIconParams(data, state);
70            };
71
72            // закэшируем иконку при открытом попапе
73            mapWrapper.cacheIcon('00ff00', 2);
74        },
75
76        /**
77         * Событие: После инициализации враппера
78         * @param {object} mapWrapper - Объект враппера карты
79         */
80        onInitAfter: function(mapWrapper) {
81
82            // Создать менеджера маркеров
83            var markersManager = new mushroom.gis.MarkersManager(mapWrapper);
84
85            /**
86             * Кастомизируем действия для разных типов объектов на карте
87             */
88            var typeActionsMap = {
89                /**
90                 * Обычная точка на карте (маркер)
91                 */
92                pointBase: {
93                    /**
94                     * Получение свойств маркера
95                     * @param data
96                     * @param state
97                     * @returns {object}
98                     */
99                    getIconParams: function(data, state) {
100                        // Доступные размеры маркеров
101                        var circleSizes = {
102                            SMALL: 12,
103                            BIG: 20
104                        };
105                        var color = (state == 2) ? '00ff00' : data.color;
106
107                        // Параметры иконки маркера
108                        params = {
109                            url: mapWrapper.getIconUrl(color, state),
110                            origin: new google.maps.Point(1, 1)
111                        };
112
113                        // Меняем иконку в зависимости от статуса
114                        if (state) {
115                            params.scaledSize = new google.maps.Size(circleSizes.BIG, circleSizes.BIG);
116                            params.anchor = new google.maps.Point(circleSizes.BIG / 2, 

116circleSizes.BIG / 2);
117                        } else {
118                            params.scaledSize = new google.maps.Size(circleSizes.SMALL, circleSizes.SMALL);
119                            params.anchor = new google.maps.Point(circleSizes.SMALL / 2, circleSizes.SMALL / 2);
120                        }
121
122                        return params;
123                    },
124                    /**
125                     * Получение данных обертки над маркером
126                     * @param mapWrapper
127                     * @param data
128                     * @returns {{icon: *}}
129                     */
130                    getMarkerData: function(mapWrapper, data) {
131                        return {
132                            icon: mapWrapper.getIconParams(data, 0)
133                        };
134                    },
135                    /**
136                     * Событие: Срабатывает при смене состояния
137                     * @param mapWrapper
138                     * @param markerWrapper
139                     */
140                    onMarkerStateUpdate: function(mapWrapper, markerWrapper) {
141                        markerWrapper.marker.setIcon(mapWrapper.getIconParams(markerWrapper.data, markerWrapper.state));
142                    },
143                    /**
144                     * Событие: Срабатывает после создания маркера
145                     * @param mapWrapper
146                     * @param markerWrapper
147                     */
148                    onMarkerCreateAfter: function(mapWrapper, markerWrapper) {
149                        mapWrapper.cacheIcon(markerWrapper.data.color, 1);
150                    },
151                    /**
152                     * Получение содержимого баллуна
153                     * @param markerWrapper
154                     * @returns {string}
155                     */
156                    getBalloonContent: function(markerWrapper) {
157                        return '<div class="infowindow">' +
158                            '<h5>' + markerWrapper.data.name + '</h5>' +
159                            '<p>Содержимое информационного окна для обычной иконки</p>' +
160                            '<p>Lat: '+markerWrapper.data.lat+'</p>' +
161                            '<p>Lng: '+markerWrapper.data.lng+'</p>' +
162                            '</div>';
163                    }
164                },
165                /**
166                 * Кастомизированный маркер (имеет картинку, не может быть выделен)
167                 */
168                pointCustom: {
169                    /**
170                     * Получение свойств маркера
171                     * @param data
172                     * @param state
173                     * @returns {object}
174                     */
175                    getIconParams: function(data, state) {},
176                    /**
177                     * Получение данных обертки над маркером
178                     * @param mapWrapper
179                     * @param data
180                     * @returns {{icon: *}}
181                     */
182                    getMarkerData: function(mapWrapper, data) {
183                        return {};
184                    },
185                    /**
186                     * Событие: Срабатывает при смене состояния
187                     * @param mapWrapper
188                     * @param markerWrapper
189                     */
190                    onMarkerStateUpdate: function(mapWrapper, markerWrapper) {},
191                    /**
192                     * Событие: Срабатывает после создания маркера
193                     * @param mapWrapper
194                     * @param markerWrapper
195                     */
196                    onMarkerCreateAfter: function(mapWrapper, markerWrapper) {
197                        var data = markerWrapper.data;
198                        var image = new Image();
199                        image.src = data.icon;
200                        image.onload = function() {
201                            markerWrapper.marker.setIcon({
202                                url: data.icon,
203                                anchor: new google.maps.Point(image.width/2, image.height/2),
204                                scaledSize: new google.maps.Size(image.width, image.height)
205                            });
206                        };
207                    },
208                    /**
209                     * Получение содержимого баллуна
210                     * @param markerWrapper
211                     * @returns {string}
212                     */
213                    getBalloonContent: function(markerWrapper) {
214                        return '<div class="infowindow">' +
215                            '<h5>' + markerWrapper.data.name + '</h5>' +
216                            '<p>Содержимое информационного окна для кастомизированной иконки</p>' +
217                            '</div>';
218                    }
219                }
220            };
221
222            // Создать объект для работы с данными (провайдер данных)
223            var dataProvider = new mushroom.gis.MarkersDataProvider(
224                markersManager,
225                // Прямое преобразование
226                function(item, extraData) {
227                    var type;
228
229                    if(item.icon) {
230                        type = 'pointCustom';
231                    } else {
232                        type = 'pointBase';
233                    }
234
235                    item.actions = extraData[type];
236                    return item;
237                },
238                // Обратное преобразование
239                function(item, extraData) {
240                    delete item.actions;
241                    return item;
242                },
243                typeActionsMap
244            );
245
246            /**
247             * Примеры использования библиотеки
248             */
249            markersManager.examples = new mushroom.gis.ExamplesFactory(markersManager, dataProvider);
250
251            // Генерировать демо-маркеры
252            //markersManager.examples.addNewMarkers();
253            //markersManager.examples.addNewMarkersWithCustomIcon();
254            //markersManager.examples.addOverlay(1);
255
256            // Сокращение для менеджера маркеров
257            // Можно пробовать в консоли тестовые примеры, используя вызов:
258            // $.mm.examples.repaintListInSegmentLatLng()
259            // или любой другой функции из объекта $.mm.examples
260            $.mm = markersManager;
261
262            /**
263             * Провайдер данных
264             * @type {mushroom.gis.MarkersDataProvider|mushroom.gis.MarkersDataProvider}
265             */
266            $.pr = dataProvider;
267        },
268
269        /**
270         * Событие: После создания маркера
271         * @param {object} mapWrapper - Объект враппера карты
272         * @param {object} markerWrapper - Объект враппера маркера
273         */
274        onMarkerCreateAfter: function(mapWrapper, markerWrapper) {
275            markerWrapper.data.actions.onMarkerCreateAfter(mapWrapper, markerWrapper);
276        },
277
278        /**
279         * Событие: Получение данных маркера
280         * @param {object} mapWrapper - Объект враппера карты
281         * @param {object} data - Данные маркера
282         */
283        getMarkerData: function(mapWrapper, data) {
284            return data.actions.getMarkerData(mapWrapper, data);
285        },
286
287        /**
288         * Событие: Наведение указателя мыши на маркер
289         * @param {object} mapWrapper - Объект враппера карты
290         * @param {object} markerWrapper - Объект враппера маркера
291         */
292        onMarkerHoverOn: function(mapWrapper, markerWrapper) {
293            markerWrapper.data.hover = true;
294        },
295
296        /**
297         * Событие: Отведение указателя мыши от маркера
298         * @param {object} mapWrapper - Объект враппера карты
299         * @param {object} markerWrapper - Объект враппера маркера
300         */
301        onMarkerHoverOff: function(mapWrapper, markerWrapper) {
302            markerWrapper.data.hover = false;

303        },
304
305        /**
306         * Событие: Обновление статуса маркера
307         * @param {object} mapWrapper - Объект враппера карты
308         * @param {object} markerWrapper - Объект враппера маркера
309         */
310        onMarkerStateUpdate: function(mapWrapper, markerWrapper) {
311            // Получить статус маркера
312            markerWrapper.state = mapWrapper.getMarkerState(markerWrapper.data);
313            // Установить z-index CSS свойство для маркера
314            markerWrapper.marker.setZIndex(markerWrapper.state);
315            // Установать иконку для маркера
316            markerWrapper.data.actions.onMarkerStateUpdate(mapWrapper, markerWrapper);
317        },
318
319        /**
320         * Событие: Клик по маркеру
321         * @param {object} mapWrapper - Объект враппера карты
322         * @param {object} markerWrapper - Объект враппера маркера
323         */
324        onMarkerClick: function(mapWrapper, markerWrapper) {
325
326            // Если находимся в режиме выбора
327            if(mapWrapper.param('selectMode')) {
328                if (markerWrapper.data.unselectable) {
329                    return false;
330                }
331
332                markerWrapper.data.selected = !markerWrapper.data.selected;
333            } else {
334                // Открыть попап
335                mapWrapper.trigger('onBalloonOpen', markerWrapper);
336                mapWrapper.param('infoWindow').open(map, markerWrapper.marker);
337
338                // Получить активный (открытый) маркер
339                var currentOpenedItem = mapWrapper.param('currentOpenedItem');
340                if(currentOpenedItem) {
341                    currentOpenedItem.edit(function(data, marker) {
342                        data.opened = false;
343                    });
344                }
345                markerWrapper.data.opened = true;
346                mapWrapper.param('currentOpenedItem', markerWrapper)
347            }
348        },
349
350        /**
351         * Событие: Закрытие балуна
352         * @param mapWrapper
353         * @param markerWrapper
354         */
355        onBalloonClose: function(mapWrapper, markerWrapper) {
356            markerWrapper.edit(function (data, marker) {
357                data.opened = false;
358            });
359        },
360
361        /**
362         * Событие: Открытие балуна
363         * @param mapWrapper
364         * @param markerWrapper
365         */
366        onBalloonOpen: function (mapWrapper, markerWrapper) {
367            var contentString = markerWrapper.data.actions.getBalloonContent(markerWrapper);
368            mapWrapper.param('infoWindow').setContent(contentString);
369        }
370    });
371}