Версия:
Популярные примеры
Карта
Геообъекты
Балун и хинт
Элементы управления
Активные области
Кластеризация
GeoQuery
Поведения и события
Поиск по карте
Пробки
Местоположение пользователя
Маршрутизация
YMapsML
GeoXML
ObjectManager
Модульная система
Панорамы
Внешние модули

Создание своего модуля

Сохранить как файлыЭкспорт на JSFiddle
API Яндекс.Карт состоит из большого количества взаимосвязанных модулей.
По умолчанию при подключении API происходит загрузка стандартного набора модулей (package.full), который включает в себя все необходимое для работы API.
Разработчик, который использует API Яндекс.Карт, имеет возможность создавать свои модули.

В данном примере создается собственный элемент управления со своим макетом.
И элемент управления, и макет оформлены в виде отдельных модулей.
Определение собственного модуля доступно при помощи метода define
После создания карты происходит запрос на получение своего модуля при помощи метода require

Подробнее о работе модулей смотрите в разделе Модули.
\n\n","custom_module.js":"// Создаем первый собственный модуль - макет своего контрола.\nymaps.modules.define('plugin.PlacemarkCounterControlLayout', [\n // Список зависимостей модуля. \n // Эти модули будут загружены (если раньше не были) перед вызовом функции, которая определяет модуль.\n 'templateLayoutFactory'\n], function (provide, templateLayoutFactory) {\n // Функция, которая определяет сам модуль.\n // Первым аргументом идет provide-функция. В provide-функцию нужно будет передать непосредственно модуль.\n // Вызов provide-функции может быть отложен во времени. К примеру, для загрузки каких-либо данных.\n // Последующие аргументы - это запрошенные в зависимостях модули. \n provide(\n templateLayoutFactory.createClass('
{{ data.placemark_count }}
')\n );\n});\n\n// Создаем второй собственный модуль.\n// Этот модуль предоставляет собственный элемент управления, который создается на основе кнопки.\nymaps.modules.define('plugin.PlacemarkCounterControl', [\n 'control.Button',\n 'util.extend',\n 'util.augment',\n // Второй модуль в зависимостях запрашивает первый.\n 'plugin.PlacemarkCounterControlLayout'\n], \nfunction (provide, Button, extend, augment, PlacemarkCounterControlLayout) {\n var CounterControl = function () {\n CounterControl.superclass.constructor.call(this, {\n data: { placemark_count: 0 },\n options: {\n selectOnClick: false,\n layout: PlacemarkCounterControlLayout,\n maxWidth: 100\n }\n });\n };\n // Наследуем все методы стандартной кнопки. \n augment(CounterControl, Button, {\n // Переопределяем метод setParent.\n setParent: function (parent) {\n CounterControl.superclass.setParent.call(this, parent);\n if (parent) {\n if (!this._mapEventListener) {\n this._mapEventListener = this.getMap().geoObjects.events.group();\n this._mapEventListener.add(['add', 'remove'], this._refresh, this);\n }\n this._refresh();\n } else if (this._mapEventListener) {\n this._mapEventListener.removeAll();\n }\n },\n \n _refresh: function () {\n this.data.set('placemark_count', this.getMap().geoObjects.getLength());\n },\n });\n \n provide(CounterControl);\n});\n\n// Инициализация карты.\nymaps.ready(function () {\n var myMap = new ymaps.Map('map', {\n center: [55.734046, 37.588628],\n zoom: 7,\n controls: []\n });\n\n // Запрашиваем в модульной системе собственный контрол.\n ymaps.modules.require(['plugin.PlacemarkCounterControl'])\n .spread(function (PlacemarkCounterControl) {\n // Создаем экземпляр собственной кнопки и добавляем её на карту.\n myMap.controls.add(\n new PlacemarkCounterControl()\n );\n });\n // Создаем кнопку, при помощи которой добавляем метки на карту. \n var addPlacemarkButton = new ymaps.control.Button({\n data: { content: 'Добавить метку' },\n options: { maxWidth: 200, float: 'right', selectOnClick: false }\n });\n myMap.controls.add(addPlacemarkButton);\n \n // Добавление метки по клику в случайное место.\n addPlacemarkButton.events.add('click', function () {\n var center = myMap.getCenter();\n center[0] += (Math.random() * 2) - 1;\n center[1] += (Math.random() * 2) - 1;\n myMap.geoObjects.add(new ymaps.Placemark(center));\n });\n});"},"resources":[],"directory":"https://sandbox.api.maps.yandex.net/examples/ru/2.1/custom_module/"}
Пишете на JavaScript? У нас есть вакансии
Sun Sep 18 2022 20:10:14 GMT+0300 (Moscow Standard Time)