JSFiddle - React, Tailwind, and code Playground
HTML
<script type="text/javascript" src="https://api-maps.yandex.ru/2.1/?lang=ru_RU"></script>
<div id="map"></div>
CSS
#map{
width:100%;
height: 300px;
}
JavaScript
var YMYmap = null;
var YMY1label = null
function init() {
YMYmap = new ymaps.Map("map",{
center: [55.752, 37.627],
zoom: 6,
controls: ['typeSelector'],
behaviors: ['scrollZoom', 'drag', 'multiTouch']
}),
overLay = function (options) {
overLay.superclass.constructor.call(this, options);
this._$content = null;
this._$Lng = options.lng;
this._$Lat = options.lat;
this._$txt = options.txt;
};
ymaps.util.augment(overLay, ymaps.collection.Item, {
onAddToMap: function (map) {
overLay.superclass.onAddToMap.call(this, map);
this._lastCenter = null;
console.log('ok'); this.getParent().getChildElement(this).then(this._onGetChildElement, this);
},
onRemoveFromMap: function (oldMap) {
this._lastCenter = null;
if (this._$content) {
this._$content.remove();
this._mapEventGroup.removeAll();
}
overLay.superclass.onRemoveFromMap.call(this, oldMap);
},
_onGetChildElement: function (parentDomContainer) {
// Создаем HTML-элемент с текстом.
this._$content = $('<div style="font-family: Arial;font-size: 1em;line-height: 1.1em;left: 0;top: -0.8em;padding: 0.3em 0.6em; white-space: nowrap;display: inline-block;margin: 3px 0px 0px 0px; color: #333333;border: 1px solid #908070; background: rgba(255, 252, 248, 0.8);-moz-border-radius: 0.3em;-webkit-border-radius: 0.3em;-khtml-border-radius: 0.3em;border-radius: 0.3em;"></div>').appendTo(parentDomContainer);
console.log('ok1');
this._mapEventGroup = this.getMap().events.group();
this._mapEventGroup.add('boundschange', this._createRequest, this);
this._createRequest();
},
_createRequest: function() {
console.log('ok2');
this._$content.html(this._$txt);
global =...