google map react
Support for React 18
google-map-react是一個基於一小部分 Google Maps API 編寫的元件。它允許您在 Google 地圖上渲染任何 React 元件。它是完全同構的，可以在伺服器上渲染。此外，即使未載入 Google Maps API，它也可以在瀏覽器中呈現地圖元件。它使用內部的、可調整的懸停演算法 - 地圖上的每個物件都可以懸停。
它允許您建立像本範例這樣的介面（您可以捲動表格、縮放/移動地圖、懸停/點擊標記以及點擊表格行）
在簡單的情況下，您只需將lat和lng屬性新增至GoogleMapReact元件的任何子元件中。
在 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 >
) ;
}節點管理：
npm install --save google-map-react
紗：
yarn add google-map-react
您可以在地圖上渲染很酷的動畫反應元件，而不是預設的 Google 地圖標記、氣球和其他地圖元件。
它在伺服器上呈現。 （歡迎搜尋引擎） （您可以在瀏覽器開發工具中停用 javascript，並重新載入任何範例頁面以查看其工作原理）
它在加載 Google Maps API 之前（甚至沒有）在地圖上渲染元件。
無需在頁面頂部放置<script src=標記。 Google Maps API 在首次使用GoogleMapReact元件時載入。
您可以使用onGoogleApiLoaded存取 Google Maps map和maps對象，在這種情況下，您需要將yesIWantToUseGoogleMapApiInternals設定為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：記得將yesIWantToUseGoogleMapApiInternals設為 true。
範例在這裡
現在地圖上的每個物件都可以懸停（但是，如果需要，您仍然可以使用 css 懸停選擇器）。如果您嘗試縮小此處的範例，您仍然可以將滑鼠懸停在幾乎每個地圖標記上。
在地圖上放置反應組件：簡單（來源）
自訂地圖選項：範例（來源）
懸停效果：簡單的懸停（來源）；距離懸停（來源）
GoogleMap 事件：範例（來源）
範例項目：main（來源）；胡言亂語（與 main 來源相同）
使用 Hooks 的叢集範例（新：來源，文章） clustering-with-hooks
聚類範例（來源）google-map-clustering-example
如何渲染數千個標記（新：來源） google-map-thousands-markers
範例： 範例 舊範例
jsbin 範例 jsbin 範例
webpackbin 範例（新）帶有 webpackbin 範例的文件（正在進行中）
本地開發範例（新）開發範例
您可以在這裡找到文件：
API參考
新文件（正在進行中）
本地開發分為兩個部分（最好使用兩個選項卡）。
首先，執行 rollup 來觀察您的src/模組，並在您進行更改時自動將其重新編譯到dist/中。
npm start # runs rollup with watch flag第二部分將執行連結到模組本機版本的example/ create-react-app。
# (in another tab)
cd example
npm start # runs create-react-app dev server現在，每當您對src/中的程式庫或範例應用程式的example/src進行更改時， create-react-app都會即時重新載入您的本機開發伺服器，以便您可以即時迭代您的元件。
如果在嘗試執行範例應用程式時出現錯誤Module not found: Can't resolve 'google-react-map'... ，您需要手動連結本機開發模組，請嘗試以下步驟：
npm linkexample/並（安裝其他依賴項後）執行： npm link google-map-react麻省理工學院
我們正在積極尋找貢獻者，請向所有者或任何合作者發送訊息。
