React Google Maps没有一致地渲染标记

Question

我有以下代码在 React Google 地图上渲染多个标记，但标记并不总是渲染。 如果我注释掉第 1 条和第 2 条的信息，请保存并取消注释该信息，标记将在 80% 的时间内呈现。 如果我只对当前位置进行硬编码，则标记将始终呈现。 我不知道我在这里做错了什么，很可能是我的 ID-10-T 错误。 提前感谢您对此事的任何帮助。

/* global google */
import React from "react"
import { compose, withProps, withStateHandlers } from "recompose"
import {
withScriptjs,
withGoogleMap,
GoogleMap,
Marker,
InfoWindow,
} from "react-google-maps"
const MyMapComponent = compose(
withProps({
googleMapURL: "https://maps.googleapis.com/maps/api/js?key=[api key goes here]&v=3.exp&libraries=geometry,drawing,places",
loadingElement: <div style={{ height: `100%` }} />,
containerElement: <div style={{ height: `600px` }} />,
mapElement: <div style={{ height: `75vh`, width: '50vw' }} />,
}),
withStateHandlers(() => ({
isOpen: false,
}), {
onToggleOpen: ({ isOpen }) => () => ({
isOpen: !isOpen,
})
}),
withScriptjs,
withGoogleMap
)((props) =>
<GoogleMap
zoom={15}
center={props.currentLocation}
>
{props.markerList.map((marker, index) => {
return (
<Marker
position={{
lat: marker.lat,
lng: marker.lng
}}
onClick={props.onToggleOpen}
title={marker.name}
key={marker.name}
>
{props.isOpen && <InfoWindow onCloseClick={props.onToggleOpen}>
<div>
<h3>Info Window</h3>
<h4>Testing</h4>
</div>
</InfoWindow>}
</Marker>
)
})};
</GoogleMap>
);
const markers = [
{
lat: 38.3332416,
lng: -95.63961839999999,
name: "bar 1"
},
{
lat: 38.0332416,
lng: -95.63971639999999,
name: "bar 2"
}
];
class MyFancyComponent extends React.PureComponent {
state = {
isMarkerShown: false,
}

componentWillMount() {
this.getGeoLocation()
}
getGeoLocation = () => {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
position => {
this.setState({
currentLatLng: {
lat: position.coords.latitude,
lng: position.coords.longitude,
name: "current location"
}
})
markers.unshift(this.state.currentLatLng);
}
)
} else {
error => console.log(error)
}
}
render() {
return (
<MyMapComponent
currentLocation={this.state.currentLatLng}
markerList={markers}
/>
)
}
}
export default MyFancyComponent;

Answer 1

关键是当确定位置(执行Geolocation.getCurrentPosition()的回调函数(时MyMapComponent组件可能已经呈现，这很可能是标记呈现不一致的原因。

要消除此行为，可以考虑以下解决方案。

由于MyFancyComponent已经是一个有状态的组件，我建议引入markers状态并像这样设置初始值：

class MyFancyComponent extends React.PureComponent {
state = {
isMarkerShown: false,
markers: markers
};
//...
}

然后，一旦确定了当前位置，状态可以像这样更新：

getGeoLocation = () => {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(position => {
let latLng = {
lat: position.coords.latitude,
lng: position.coords.longitude,
name: "current location"
};
this.setState( prevState => ({
currentLatLng: latLng,
markers: [latLng,...prevState.markers]
}));
});
} else {
error => console.log(error);
}
};

最后作为道具传MyMapComponent组件：

<MyMapComponent
currentLocation={this.state.currentLatLng}
markerList={this.state.markers}
/>