google map react

Reaksi Google Peta ·

google-map-react adalah komponen yang ditulis pada sekumpulan kecil Google Maps API. Ini memungkinkan Anda merender komponen React apa pun di Google Map. Ini sepenuhnya isomorfik dan dapat dirender di server. Selain itu, ia dapat merender komponen peta di browser meskipun Google Maps API tidak dimuat. Ia menggunakan algoritma hover internal yang dapat diubah - setiap objek di peta dapat di-hover.

Ini memungkinkan Anda membuat antarmuka seperti contoh ini (Anda dapat menggulir tabel, memperbesar/memindahkan peta, mengarahkan/mengklik penanda, dan mengklik baris tabel)

Memulai

Dalam kasus sederhana Anda hanya perlu menambahkan props lat dan lng ke turunan komponen GoogleMapReact mana pun.

Lihat aksinya di 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 >
  ) ;
}

Peta saya tidak muncul!

• Pastikan elemen wadah memiliki lebar dan tinggi. Peta akan mencoba mengisi wadah induk, tetapi jika wadah tidak memiliki ukuran, peta akan diciutkan hingga lebar/tinggi 0. Ini bukan persyaratan untuk google-map-react, ini persyaratan untuk google-maps secara umum.

Instalasi

npm:

 npm install --save google-map-react

benang:

 yarn add google-map-react

Fitur

Bekerja dengan Komponen Anda

Alih-alih menggunakan penanda default Google Maps, balon, dan komponen peta lainnya, Anda dapat merender komponen reaksi animasi keren di peta.

Rendering Isomorfik

Itu dirender di server. (Selamat datang mesin pencari) (Anda dapat menonaktifkan javascript di alat pengembang browser, dan memuat ulang halaman contoh mana pun untuk melihat cara kerjanya)

Posisi Komponen Dihitung Secara Independen dari Google Maps API

Ini merender komponen pada peta sebelum (dan bahkan tanpa) Google Maps API dimuat.

Google Maps API Dimuat Sesuai Permintaan

Tidak perlu menempatkan tag <script src= di bagian atas halaman. Google Maps API dimuat saat komponen GoogleMapReact pertama kali digunakan.

Gunakan API Google Maps

Anda dapat mengakses map Google Maps dan objek maps dengan menggunakan onGoogleApiLoaded , dalam hal ini Anda perlu menyetel yesIWantToUseGoogleMapApiInternals ke 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: Ingatlah untuk menyetel yesIWantToUseGoogleMapApiInternals ke true.

Contoh di sini

Algoritma Hover Internal

Sekarang setiap objek di peta dapat di-hover (namun, Anda masih dapat menggunakan pemilih css hover jika Anda mau). Jika Anda mencoba memperkecil contoh di sini, Anda masih dapat mengarahkan kursor ke hampir semua penanda peta.

Contoh

• Menempatkan komponen reaksi pada peta: sederhana (sumber)

• Opsi peta khusus: contoh (sumber)

• Efek hover: hover sederhana (sumber); jarak melayang (sumber)

• Acara GoogleMap: contoh (sumber)

• Contoh proyek: main (sumber); omong kosong (sumber yang sama dengan utama)

• Contoh pengelompokan menggunakan Hooks ( baru : sumber, artikel) pengelompokan-dengan-kait

• Contoh pengelompokan (sumber) contoh-peta-pengelompokan-google

• Cara merender ribuan penanda ( baru : sumber) google-map-ribuan-penanda

• Contoh: Contoh Contoh lama

• contoh jsbin contoh jsbin

• contoh webpackbin ( baru ) dokumen dengan contoh webpackbin (Sedang diproses)

• contoh pengembangan lokal (baru) contoh pengembangan

Dokumentasi

Anda dapat menemukan dokumentasinya di sini:

• Referensi API

• DOKUMEN BARU (Sedang diproses)

Menyumbang

Pembangunan lokal dipecah menjadi dua bagian (idealnya menggunakan dua tab).

Pertama, jalankan rollup untuk melihat modul src/ Anda dan secara otomatis mengkompilasi ulang modul tersebut ke dist/ setiap kali Anda membuat perubahan.

npm start # runs rollup with watch flag

Bagian kedua akan menjalankan example/ create-react-app yang ditautkan ke versi lokal modul Anda.

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

Sekarang, kapan pun Anda membuat perubahan pada perpustakaan Anda di src/ atau pada contoh aplikasi example/src , create-react-app akan memuat ulang server pengembang lokal Anda secara langsung sehingga Anda dapat melakukan iterasi pada komponen Anda secara real-time.

Pemasangan tautan manual

Jika Anda mendapatkan kesalahan Module not found: Can't resolve 'google-react-map'... saat mencoba menjalankan aplikasi contoh, Anda perlu menautkan modul pengembangan lokal secara manual, coba langkah-langkah berikut:

1. Di folder akar:

npm link

2. Masuk ke example/ dan (setelah menginstal dependensi lain) jalankan:

npm link google-map-react

Lisensi

MIT

Masalah yang Diketahui

• Browser lama (http://caniuse.com/#feat=promises) memerlukan polyfill ES6 Promise agar dapat berfungsi.

!!! Kami sedang mencari kontributor

Kami sedang aktif mencari kontributor, silakan kirim pesan ke Pemilik atau Kolaborator mana pun.