Возникла проблема с кастомизированным видом метки на карте. Вроде создаю метки, получаю их по ajax, в options
меток добавляю iconLayout: 'default#imageWithContent
', но он просто не хочет отображаться. Попробовал различные модификации, включаяя iconLayout: 'default#image
, тут все работает нормально, вместо меток отображаются картинки, но мне необхоимо вместо меток делать div
с текстом.
import React from 'react';
import { YMaps, Map, Clusterer, Placemark } from 'react-yandex-maps';
import '../css/MapApp.css';
import SideBar from "../SideBar/SideBar";
import {someFunction} from "../../actions";
import ReactDOMServer from "react-dom/server";
import '../css/MapPoints.css'
const carTypes = {
light: 0,
truck: 1,
bus: 2,
spec: 3
};
let divisions = [];
class MapApp extends React.Component{
constructor(props){
super(props);
this.state = {
template: null
};
this.createTemplateLayoutFactory = ymaps => {
if (ymaps && !this.state.template) {
this.setState({
template: ymaps.templateLayoutFactory.createClass(
'<div class="bb">' +
'<span class="bb-num-org">'+
'</span>xzcxzcddfaa<span class="bb-name">' +
'</span></div>'
),
});
}
};
}
render() {
return(
<div className="app">
<SideBar />
<YMaps
query={{
apikey: '27544797-3131-4759-9f4b-54f17c827eb2&lang=ru_RU',
}}
version={"2.1"}
>
<div className="app-map">
<Map
onLoad={this.createTemplateLayoutFactory}
width={"100%"}
height={"100vh"}
defaultState={{
center: [55.751574, 37.573856],
zoom: 5,
behaviors: ['default', 'scrollZoom'],
controls: [],
}}
modules={['templateLayoutFactory']}
>
{console.log('---state ',this.state.template)}
{
this.props.points.divisions.map(point => {
return (
<Placemark
key={point.organization.id}
geometry={[point.organization.x_pos, point.organization.y_pos]}
properties={{
hintContent: "asd",
balloonContent: 'Это красивая метка',
iconCaption : 'asd'
}}
modules={[
"geoObject.addon.hint"
]}
options={{
iconLayout:'default#imageWithContent',
iconContentLayout: this.state.template,
iconContentSize: [100,100],
iconContentOffset: [10, 10],
}}
/>)
})
}
</Map>
</div>
</YMaps>
</div>
)
}
}