在嘗試在個人react.js專案中實作Google地圖API時，我遇到了幾個非常複雜且令人困惑的範例。這是我如何在我的應用程式中使用 Google 地圖的簡短範例！
首先，事情第一！
前往Google 地圖 API頁面，註冊並取得令牌以供使用！您必須輸入信用卡號才能接收令牌。然而，谷歌聲稱，如果您不親自升級服務，他們不會向您的帳戶收取費用。請自行決定是否繼續。
獲得 API 金鑰後，您就可以開始建立您的應用程式了！
建立您的 react 應用程式
npm init react-app my-app
安裝依賴項
npm install --save google-maps-react
這就是我們如何將谷歌地圖作為一個元件來獲取！
檢查您的 package.json 檔案以確保它已安裝！
初始設定完成後，您就可以開始編碼了！
1.導入google-maps-react！
import { Map, GoogleApiWrapper } from 'google-maps-react';
2. 將地圖元件加入渲染函數中！
render() {
return (
<Map
google={this.props.google}
zoom={8}
style={mapStyles}
initialCenter={{ lat: 47.444, lng: -122.176}}
/>
);
}
3. 編輯您的匯出預設語句
export default GoogleApiWrapper({
apiKey: 'TOKEN HERE'
})(MapContainer);
請務必在此處插入您的 API 金鑰！
4.加入樣式
如果您願意，可以變更一些樣式屬性。我在課堂外將其作為常變數。
const mapStyles = {
width: '100%',
height: '100%',
};
5. 啟動你的伺服器！
偉大的！你做到了！但說實話，沒有任何標記的地圖有什麼意義！那麼讓我們來加入一些吧！
6. 標記它！
import { Map, GoogleApiWrapper, Marker } from 'google-maps-react';
更新您的地圖元件以包含標記元件！
render() {
return (
<Map
google={this.props.google}
zoom={8}
style={mapStyles}
initialCenter={{ lat: 47.444, lng: -122.176}}
>
<Marker position={{ lat: 48.00, lng: -122.00}} />
</Map>
);
}
然後你就會擁有這個！
讓我們加入更多！
您可以透過程式設計方式循環狀態來顯示地點，而不是新增一個標記。在我的範例中，我展示了該地區的一些舊貨店。您也可以為它們加入事件，例如 onClick！
export class MapContainer extends Component {
constructor(props) {
super(props);
this.state = {
stores: [{lat: 47.49855629475769, lng: -122.14184416996333},
{latitude: 47.359423, longitude: -122.021071},
{latitude: 47.2052192687988, longitude: -121.988426208496},
{latitude: 47.6307081, longitude: -122.1434325},
{latitude: 47.3084488, longitude: -122.2140121},
{latitude: 47.5524695, longitude: -122.0425407}]
}
}
displayMarkers = () => {
return this.state.stores.map((store, index) => {
return <Marker key={index} id={index} position={{
lat: store.latitude,
lng: store.longitude
}}
onClick={() => console.log("You clicked me!")} />
})
}
render() {
return (
<Map
google={this.props.google}
zoom={8}
style={mapStyles}
initialCenter={{ lat: 47.444, lng: -122.176}}
>
{this.displayMarkers()}
</Map>
);
}
}
這就是大家！
我希望本教程有助於建立您自己的應用程式！
原文出處：https://dev.to/jessicabetts/how-to-use-google-maps-api-and-react-js-26c2
共有 0 則留言
文字內容提供幾種功能：
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
熱門文章
