Я пытаюсь показать некоторые маркеры на Карте Google, используя ReactJs.Неправильное расположение маркера при визуализации в компоненте
На данный момент у меня есть два фиксированных местоположения (Лондон и Париж), но позже я хочу загрузить местоположения с сервера, чтобы я мог обрабатывать их в отдельном компоненте.
По какой-то причине, когда я делаю Париж в отдельном компоненте, его помещают в угол карты. Я могу перемещать карту вокруг, масштабировать ее, но Париж все еще находится в углу.
Вот мой код:
var center = { lat: 49.1951, lng: 16.6068 };
var zoom = 3;
const K_WIDTH = 40;
const K_HEIGHT = 40;
const greatPlaceStyle = {
// initially any map object has left top corner at lat lng coordinates
// it's on you to set object origin to 0,0 coordinates
position: 'absolute',
width: K_WIDTH,
height: K_HEIGHT,
left: -K_WIDTH/2,
top: -K_HEIGHT/2,
border: '5px solid #f44336',
borderRadius: K_HEIGHT,
backgroundColor: 'white',
textAlign: 'center',
color: '#3f51b5',
fontSize: 16,
fontWeight: 'bold',
padding: 4
};
class PlaceMarkers extends React.Component{
render(){
return(
<div style={greatPlaceStyle} lat="48.8566" lng="2.3522">Paris</div>
)
}
}
class PlaceBlock extends React.Component{
render(){
return(
<div>
<div className="thumbnail ep-map">
<GoogleMap defaultCenter={center} defaultZoom={zoom}>
<div style={greatPlaceStyle} lat="51.5074" lng="0.1278">London</div>
<PlaceMarkers/>
</GoogleMap>
</div>
</div>
)
}
Я очень новой для ReactJs так что может быть что-то очень простое?
Edit:
Благодаря Max я сделал несколько изменений. Теперь мои маркеры работают даже при загрузке с сервера (с использованием axios для GET). Вместо того, чтобы каждый маркер в качестве отдельного компонента, я переименовал свой компонент в GoogleMapBlock и пусть обрабатывать карты, включая маркеры:
class GoogleMapBlock extends React.Component{
constructor(props) {
super(props);
this.state = {
markers: []
};
}
componentDidMount() {
axios
.get(getBaseUrl()+`get`)
.then((response) => {
this.setState({
markers: response.data.markers
});
})
.catch((e) =>
{
console.error(e);
});
}
render(){
var myMarkers = [];
var count = 1;
this.state.markers.forEach(function(marker){
var markerId = "markerId" + count;//marker.key
myMarkers.push(
<div id={markerId} style={greatPlaceStyle} lat={marker.position.lat} lng={marker.position.lng}>{marker.title}</div>
);
count++;
});
return(
<div className="thumbnail ep-map">
<GoogleMap defaultCenter={center} defaultZoom={zoom}>
{myMarkers}
</GoogleMap>
</div>
);
}
}