Пустой экран в реакции-google-maps streetview - PullRequest
Новая
       13

Пустой экран в реакции-google-maps streetview

0 голосов
/ 17 июня 2019

Примерно в 50% случаев StreetViewPanorama отображается в виде пустого экрана в зависимости от координат.Есть ли способ проверить, будет ли экран пустым, прежде чем я решу показать вид улицы?Если это будет, то я просто хотел бы показать регулярную карту 

const StreetView = withScriptjs(
  withGoogleMap(props => {
    const { coordinates, address, city, state, zip } = props;
    return (
      <GoogleMap
        defaultZoom={14}
        defaultCenter={{
          lat: coordinates[1],
          lng: coordinates[0],
        }}
      >
        <StreetViewPanorama
          defaultPosition={{
            lat: coordinates[1],
            lng: coordinates[0],
          }}
          visible
        />
      </GoogleMap>
    );
  }),
);
export default props => {
  return (
    <StreetView
      {...props}
      googleMapURL={`https://maps.googleapis.com/maps/api/js?key=${GOOGLE_API_KEY}&libraries=visualization`}
      loadingElement={<div style={{ height: `100%` }} />}
      containerElement={<div style={{ height: `800px` }} />}
      mapElement={<div style={{ height: `100%` }} />}
    />
  );
};

1 Ответ

0 голосов
/ 17 июня 2019

У Google есть конечная точка для проверки правильности координат. Вы можете использовать троичную систему для проверки состояния и отображения маркера, если просмотр улиц не существует. 

const StreetView = withScriptjs(
  withGoogleMap(props => {
    const { coordinates, address, city, state, zip } = props;
    const [streetView, setStreetView] = useState(null);
    axios
      .get(
        `https://maps.googleapis.com/maps/api/streetview/metadata?key=${GOOGLE_API_KEY}&location=${
          coordinates[1]
        },${coordinates[0]}`,
      )
      .then(resp => setStreetView(resp.data.status));
    return (
      <GoogleMap
        defaultZoom={14}
        defaultCenter={{
          lat: coordinates[1],
          lng: coordinates[0],
        }}
      >
        {streetView === 'OK' ? (
          <StreetViewPanorama
            defaultPosition={{
              lat: coordinates[1],
              lng: coordinates[0],
            }}
            visible
          />
        ) : (
          <></>
        )}
      </GoogleMap>
    );
  }),
);
export default props => {
  return (
    <StreetView
      {...props}
      googleMapURL={`https://maps.googleapis.com/maps/api/js?key=${GOOGLE_API_KEY}&libraries=visualization`}
      loadingElement={<div style={{ height: `100%` }} />}
      containerElement={<div style={{ height: `800px` }} />}
      mapElement={<div style={{ height: `100%` }} />}
    />
  );
};
...