小編精選 - 技術文章翻譯 · 03月01日

如何將 Google Maps API 與 React.js 結合使用

同學好

在嘗試在個人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';

將地圖元件加入渲染函數中！

render() {
    return (
        <Map
          google={this.props.google}
          zoom={8}
          style={mapStyles}
          initialCenter={{ lat: 47.444, lng: -122.176}}
        />
    );
  }

編輯您的匯出預設語句

export default GoogleApiWrapper({
  apiKey: 'TOKEN HERE'
})(MapContainer);

請務必在此處插入您的 API 金鑰！

4.加入樣式

如果您願意，可以變更一些樣式屬性。我在課堂外將其作為常變數。

const mapStyles = {
  width: '100%',
  height: '100%',
};

啟動你的伺服器！

谷歌地圖 API

偉大的！你做到了！但說實話，沒有任何標記的地圖有什麼意義！那麼讓我們來加入一些吧！

標記它！

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>
    );
  }
}

這就是大家！

帶有許多標記的谷歌地圖