Google Map APIの使用方法

2698 ワード
テキストリンク
APIキーの取得
ホームページにGoogleマップを載せるためには、まずAPIキーを入手します.
Google Mapsプラットフォームに入ります.
[スタート](Start)をクリックします.
目的の製品とプロジェクトを選択します.
決済情報を入力させますが、決済ではなく、ロボットの用途を区別します.慌てずに入力して12ヶ月の無料体験版を利用しますが、12ヶ月後は自動的に申請しないので心配しないでください.
REPORT THIS AD
必要なAPIを選択しますが、普段よく見かける地図を使うためには、まずMaps JavaScript APIを受信します.
アクセスして[設定を使用](Use Settings)ボタンを押すと、APIキーが表示されます.画面の左側で、[APIとサービス]で[ユーザ認証情報]をクリックします.次に、「APIキー」を選択します.
APIキーの生成をクリックし、キー制限を選択します.これはAPIキーの使用を制限するためです.状況に応じて制限事項を選択します.次にSelectAPIをクリックし、MapJavaScript APIをクリックします.
最初はPlaces APIを使いたかったのですが、Places APIをクリックして使いたかったのですが、ずっとエラーが出ていたので見てみましたが、基本的にはMaps JavaScript APIを敷く必要があります.そのため、追加の機能は、Map JavaScript APIを敷いた後、使いたいAPIを繰り返し選択すればいいだけです.
Google Map Reactで使用
まずGoogleマップパッケージをダウンロードします.
1
npm install --save google-maps-react
REPORT THIS AD
その後、必要なファイルをインポートし、Mapcomponentを必要な場所に使用します.
基本支柱は以下の通りです.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import { Map, GoogleApiWrapper } from 'google-maps-react';
render() {
const mapStyles = {
width: '100%',
height: '100%',
};
return (
google={this.props.google}
zoom={8}
style={mapStyles}
initialCenter={{ lat: 0, lng: 0}}
/>
);
}
mapStylesという変数を宣言し、スタイル管理を行うか、divを使用してもう一度パッケージしてclassNameに渡し、sassを使用して管理することができます.latとlngに緯度と経度をそれぞれ加えると、初期に地図の画面が見えます.zoomでは、数字が大きいほど詳細に表示されます.一番下は書き出しで、受け取ったばかりのAPIキーを「TOKEN HERE」位置に入れます.
1
2
3
export default GoogleApiWrapper({
apiKey: 'TOKEN HERE'
})(MapContainer
ここまですると、地図だけが表示されます.ここにグーグルマップでよく見かけるマークを追加したいです.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { Map, GoogleApiWrapper, Marker } from 'google-maps-react';
render() {
return (
google={this.props.google}
zoom={8}
style={mapStyles}
initialCenter={{ lat: 0, lng: 0}}
    >
      <Marker position={{ lat: 0, lng: 0}} />
    </Map>
);
}
REPORT THIS AD
緯度と経度の値を指定すると、次のように表示されます.
终わります!
ADVERTISEMENT
REPORT THIS AD
動的グラフとグラフを構築するには、反応のプロットを使用する
反応せずにReduxを理解する