JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Примеры. Собственный элемент управления.</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251"/>
<!-- Если вы используете API локально, то в URL ресурса необходимо указывать протокол в стандартном виде (http://...)-->
<script src="http://api-maps.yandex.ru/2.1/?lang=ru_RU&load=package.full&mode=debug" type="text/javascript"></script>
<script src="https://yandex.st/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
ymaps.ready(function () {
// Пример реализации собственного элемента управления на основе наследования от collection.Item.
// Элемент управления отображает название объекта, который находится в центре карты.
var map = new ymaps.Map("map", {
center: [55.819543, 37.611619],
zoom: 10,
controls: ['zoomControl', 'fullscreenControl']
}
),
// Создаем собственный класс.
CustomControlClass = function (options) {
CustomControlClass.superclass.constructor.call(this, options);
this._$content = null;
};
// И наследуем его от collection.Item.
ymaps.util.augment(CustomControlClass, ymaps.collection.Item, {
onAddToMap: function (map) {
CustomControlClass.superclass.onAddToMap.call(this, map);
this.getParent().getChildElement(this).then(this._onGetChildElement, this);
},
onRemoveFromMap: function (oldMap) {
if (this._$content) {
this._$content.remove();
}
CustomControlClass.superclass.onRemoveFromMap.call(this, oldMap);
},
_onGetChildElement: function (parentDomContainer) {
// Создаем HTML-элемент с текстом.
this._$content = $('<img src="http://yastatic.net/morda-logo/i/logo.svg"/>').appendTo(parentDomContainer);
}
});
...