JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU&foo=.js"></script>
<div id="map" style="height: 300px; width: 420px;"></div>
CSS
#cross-center{
font-size: 20px;
cursor: pointer;
position: absolute;
z-index: 800;
}
JavaScript
ymaps.ready(function() {
var map = new ymaps.Map('map', {
center: [55.64954, 37.621587],
zoom: 8
});
var CrossCenterLayout = ymaps.templateLayoutFactory.createClass('<div id="cross-center" style="left:$[options.position.left]px;top:$[options.position.top]px;">+</div>', {
build: function() {
console.log(this)
CrossCenterLayout.superclass.build.call(this);
this._controlListeners = this.events.group().add('mouseenter', this.onCenterEnter, this).add('mouseleave', this.onCenterLeave, this);
this._map = this.getData().map;
},
clear: function() {
this._controlListeners.group().removeAll();
CrossCenterLayout.superclass.clear.call(this);
},
onCenterEnter: function() {
var center = this._map.getCenter();
var lat = center[0].toFixed(2);
var lng = center[1].toFixed(2);
this._map.hint.show(center, {
content: lat + ', ' + lng
});
},
onCenterLeave: function() {
this._map.hint.hide();
}
});
var CrossCenter = function() {
this.events = new ymaps.event.Manager();
this.options = new ymaps.option.Manager();
this.state = new ymaps.data.Manager();
};
CrossCenter.prototype = {
setParent: function(parent) {
this.parent = parent;
if (parent) {
var map = parent.getMap();
this.layout = new CrossCenterLayout({
map: map,
options: this.options
});
this.layout.setParentElement(map.panes.get('controls').getElement());
} else {
this.layout.setParentElement(null);
}
},
getParent: function() {
return this.parent;
}
};
var crossCenter = new CrossCenter();
map.controls.add(crossCenter, {
...