Reagir Google Maps obter limites da Polilinha

Question 1

Eu fui brincar com o Strava desenvolvedor da API um pouco e foi a construção de uma base de Reagir aplicativo para buscar soem Starva atividades e exibi-lo em uma lista. Acordo de recompra pode ser encontrado aqui.

Eu tenho um mapa que compõe a atividade de percurso desta componente.

const StravaMap = withScriptjs(
  withGoogleMap(({ zoom, activity }: StravaMapProps) => {
    const center = {
      lat: activity.start_latitude,
      lng: activity.start_longitude,
    };

    const path = activity.map.summary_polyline
      ? createPath(polyline.decode(activity.map.summary_polyline))
      : [];

    return (
      <GoogleMap
        defaultZoom={zoom}
        defaultCenter={center}
        defaultOptions={mapOptions}
      >
        <Marker position={center} />
        {path.length > 0 && (
          <Polyline options={polyLineOptions} path={path} visible />
        )}
      </GoogleMap>
    );
  }),
);

Origem do arquivo aqui.

O polígono que compõe bem, mas agora estou tentando descobrir como eu posso reduzir o zoom no mapa para caber th epolyline em limites.

Que eu possa estar a meter soemthing, mas eu não tenho uma idéia clara de como segurar a polilinha instância para obter o limite ou o mapa para definir limites.

Eu sei como buffer o poluyline com base no caminho, mas depois de eu ter feito thay e ter limites, como posso definir o limite de utilizar este Reagir Google Maps biblioteca?

Obrigado,

Question 2

Com um pouco mais de escavação e de pesquisa, eu encontrei uma solução viável eu vou compartilhar para o benefício dos outros:

Eu encontrei este post no GitHub

Usando que eu criei uma função auxiliar para criar o google.maps.LatLngBounds

export const createBounds = (path: IPoint[]): google.maps.LatLngBounds => {
  const bounds = new window.google.maps.LatLngBounds();
  path.map((p: IPoint) => bounds.extend(p));
  return bounds;
};

Na minha StravaMap componente I, em seguida, passar o caminho que tínhamos para esta função e chegar a limites como esta:

const bounds = createBounds(path);

Eu posso passar para o GoogleMap componente usando o ref, como:

  ref={(map) => map && map.fitBounds(bounds)}

E que, com sucesso, define o mapa vinculado quando a atividade é carregado.

loan.burger · Answer 1 · 2021-11-24T05:33:14

Com um pouco mais de escavação e de pesquisa, eu encontrei uma solução viável eu vou compartilhar para o benefício dos outros:

Eu encontrei este post no GitHub

Usando que eu criei uma função auxiliar para criar o google.maps.LatLngBounds

export const createBounds = (path: IPoint[]): google.maps.LatLngBounds => {
  const bounds = new window.google.maps.LatLngBounds();
  path.map((p: IPoint) => bounds.extend(p));
  return bounds;
};

Na minha StravaMap componente I, em seguida, passar o caminho que tínhamos para esta função e chegar a limites como esta:

const bounds = createBounds(path);

Eu posso passar para o GoogleMap componente usando o ref, como:

  ref={(map) => map && map.fitBounds(bounds)}

E que, com sucesso, define o mapa vinculado quando a atividade é carregado.

Reagir Google Maps obter limites da Polilinha

Pergunta

Melhor resposta

Em outros idiomas

Esta página está em outros idiomas

Popular nesta categoria

Perguntas populares nesta categoria