google map react

Reação do mapa do Google ·

google-map-react é um componente escrito em um pequeno conjunto da API do Google Maps. Ele permite renderizar qualquer componente React no mapa do Google. É totalmente isomórfico e pode ser renderizado em um servidor. Além disso, ele pode renderizar componentes do mapa no navegador mesmo que a API do Google Maps não esteja carregada. Ele usa um algoritmo de foco interno ajustável - todos os objetos no mapa podem ser pairados.

Ele permite que você crie interfaces como este exemplo (você pode rolar a tabela, ampliar/mover o mapa, passar o mouse/clicar nos marcadores e clicar nas linhas da tabela)

Começando

No caso simples, você só precisa adicionar adereços lat e lng a qualquer filho do componente GoogleMapReact .

Veja-o em ação em jsbin

 import React from "react" ;
import GoogleMapReact from 'google-map-react' ;

const AnyReactComponent = ( { text } ) => < div > { text } < / div > ;

export default function SimpleMap ( ) {
  const defaultProps = {
    center : {
      lat : 10.99835602 ,
      lng : 77.01502627
    } ,
    zoom : 11
  } ;

  return (
    // Important! Always set the container height explicitly
    < div style = { { height : '100vh' , width : '100%' } } >
      < GoogleMapReact
        bootstrapURLKeys = { { key : "" } }
        defaultCenter = { defaultProps . center }
        defaultZoom = { defaultProps . zoom }
      >
        < AnyReactComponent
          lat = { 59.955413 }
          lng = { 30.337844 }
          text = "My Marker"
        / >
      < / GoogleMapReact >
    < / div >
  ) ;
}

Meu mapa não aparece!

• Certifique-se de que o elemento contêiner tenha largura e altura. O mapa tentará preencher o contêiner pai, mas se o contêiner não tiver tamanho, o mapa será recolhido para largura/altura 0. Este não é um requisito para o google-map-react, é um requisito para o google-maps em geral.

Instalação

npm:

 npm install --save google-map-react

fio:

 yarn add google-map-react

Características

Funciona com seus componentes

Em vez dos marcadores, balões e outros componentes do mapa padrão do Google Maps, você pode renderizar seus componentes de reação animados interessantes no mapa.

Renderização Isomórfica

Ele é renderizado no servidor. (Bem-vindos, mecanismos de pesquisa) (você pode desativar o javascript nas ferramentas de desenvolvimento do navegador e recarregar qualquer página de exemplo para ver como funciona)

Posições de componentes calculadas independentemente da API do Google Maps

Ele renderiza componentes no mapa antes (e mesmo sem) o carregamento da API do Google Maps.

API do Google Maps carrega sob demanda

Não há necessidade de colocar uma tag <script src= no topo da página. A API do Google Maps é carregada no primeiro uso do componente GoogleMapReact .

Use a API do Google Maps

Você pode acessar map do Google Maps e os objetos maps usando onGoogleApiLoaded , neste caso você precisará definir yesIWantToUseGoogleMapApiInternals como true

...

const handleApiLoaded = ( map , maps ) => {
  // use map and maps objects
} ;

...

< GoogleMapReact
  bootstrapURLKeys = { { key : /* YOUR KEY HERE */ } }
  defaultCenter = { this . props . center }
  defaultZoom = { this . props . zoom }
  yesIWantToUseGoogleMapApiInternals
  onGoogleApiLoaded = { ( { map , maps } ) => handleApiLoaded ( map , maps ) }
>
  < AnyReactComponent
    lat = { 59.955413 }
    lng = { 30.337844 }
    text = "My Marker"
  / >
< / GoogleMapReact >

PST: lembre-se de definir yesIWantToUseGoogleMapApiInternals como true.

Exemplo aqui

Algoritmo de foco interno

Agora, todos os objetos no mapa podem ser pairados (no entanto, você ainda pode usar seletores de foco CSS, se desejar). Se você tentar diminuir o zoom aqui, ainda poderá passar o mouse sobre quase todos os marcadores do mapa.

Exemplos

• Colocando componentes de reação no mapa: simples (fonte)

• Opções de mapa personalizado: exemplo (fonte)

• Efeitos de foco: foco simples (fonte); pairar distância (fonte)

• Eventos do GoogleMap: exemplo (fonte)

• Projeto de exemplo: principal (fonte); balderdash (mesma fonte do principal)

• Exemplo de cluster usando Hooks ( novo : fonte, artigo) clustering-with-hooks

• Exemplo de clustering (fonte) google-map-clustering-example

• Como renderizar milhares de marcadores ( novo : fonte) google-map-thousands-markers

• Exemplos: Exemplos Exemplos antigos

• exemplo jsbin exemplo jsbin

• exemplos de webpackbin ( novos ) documentos com exemplos de webpackbin (em andamento)

• exemplo de desenvolvimento local (novo) exemplo de desenvolvimento

Documentação

Você pode encontrar a documentação aqui:

• Referência de API

• NOVOS DOCUMENTOS (em andamento)

Contribuir

O desenvolvimento local é dividido em duas partes (de preferência usando duas guias).

Primeiro, execute rollup para observar seu módulo src/ e recompilá-lo automaticamente em dist/ sempre que fizer alterações.

npm start # runs rollup with watch flag

A segunda parte executará o example/ create-react-app que está vinculado à versão local do seu módulo.

 # (in another tab)
cd example
npm start # runs create-react-app dev server

Agora, sempre que você fizer uma alteração em sua biblioteca em src/ ou no aplicativo de exemplo example/src , create-react-app recarregará seu servidor de desenvolvimento local para que você possa iterar em seu componente em tempo real.

Instalação manual do link

Se você receber o erro Module not found: Can't resolve 'google-react-map'... ao tentar executar o aplicativo de exemplo, você precisa vincular manualmente seu módulo de desenvolvimento local, tente as seguintes etapas:

1. Na pasta raiz:

npm link

2. Entre em example/ e (após instalar outras dependências) execute:

npm link google-map-react

Licença

MIT

Problemas conhecidos

• Navegadores mais antigos (http://caniuse.com/#feat=promises) precisarão de um polyfill ES6 Promise para funcionar.

!!! Procuramos colaboradores

Estamos ativamente à procura de colaboradores, por favor envie uma mensagem ao Proprietário ou a qualquer um dos Colaboradores.