Я создал карты Google с несколькими маркерами. Теперь я хочу добавить контент для каждого маркера. Это работает нормально, если я делаю код все в строках, но есть проблема загрузки элементов реакции внутри этой строки.
В этом проекте мы используем IconUiKit для отображения значков. Цель состоит в том, чтобы добавить значок булавки внутри информационного окна.
Если вы видите очень похожий на мой вопрос здесь => Как использовать компонент реагирования для отображения Google Maps InfoWindow . К сожалению, ReactDOMServer.renderToString () возвращает ошибку, что ReactDOMServer не может быть найден.
private setMarkers(map: any): any {
const {stores} = this.state;
const infowindow = new google.maps.InfoWindow({
maxWidth: 400
});
for (let i = 0; i < stores.length; i++) {
if (google.maps.GeocoderStatus.OK === 'OK' && stores[i].store.address &&
(Number(stores[i].store.address.latitude) !== undefined) &&
Number(stores[i].store.address.longitude)) {
let lat = stores[i].store.address.latitude !== undefined ? stores[i].store.address.latitude : 0;
let lng = stores[i].store.address.longitude !== undefined ? stores[i].store.address.longitude : 0;
let pos = lat && lng ? new google.maps.LatLng(lat, lng) : {lat: 0, lng: 0};
let marker = new google.maps.Marker({
map: map,
position: pos
});
let projectInfo = [] as string[];
stores[i].projects.forEach(project => {
projectInfo.push(
`<p><b>${project.projectNo}</b></p>` +
'<p>Attribution: Uluru,' +
'<a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">' +
'https://en.wikipedia.org/w/index.php?title=Uluru' +
'</a>' +
'(last visited June 22, 2009).</p>' +
'<a class="uk-button uk-button-grey uk-button-register uk-width-1-1 uk-text-uppercase" href="/">' +
'<span>' +
'Project Details' +
'</span>' +
'</a>'
);
});
let icon = <IconUikit icon="gear" wrap={true}/>;
console.log(icon.toString());
let contentString =
'<div class="maps-tooltip">' +
'<div class="uk-grid">' +
'<div class="uk-width-1-4">' +
`<img src="${stores[i].store.imageUrl}" class="uk-width-1-1"/>` +
'</div>' +
'<div class="uk-width-3-4">' +
`<p><b class="fr-color-black">${stores[i].store.address.name1}</b></p>` +
/// HERE IS THE COMPONENT
ReactDOMServer.renderToString(<IconUikit icon="gear" wrap={true}/>) +
'</div>' +
'<div class="uk-width-1-1">' +
`${projectInfo.toString()}` +
'</div>' +
'</div>' +
'</div>';
google.maps.event.addListener(marker, 'click', function() {
infowindow.setOptions({
content: contentString,
});
infowindow.open(map, marker);
});
}
}
}