react-google-mapsを使用してGoogleマップをレンダリングしようとしています。 地図が完全に読み込まれる前に、geolocation.navigator
機能を使用してユーザーの現在地を取得しますが、ユーザーの位置を中心として地図の境界を計算する必要があります。 これを達成するには?LatLngBoundを中心からズームして手動でズームするにはどうすればいいですか?
0
A
答えて
0
は最後にこれは私が手動で順番にnavigator.geolocation.getCurrentPosition
関数によって返される中央、与えられたマップの境界を計算するために管理する方法です。
この緯度度からkmsへの変換に基づくこの計算は、1度の緯度変化が約111.2kmに相当する。私は10km幅のlatLngから地図の境界を計算しています。あなたはまた、マップまでローダーまたはスピナーのために行くことができ
const geolocation = (
navigator.geolocation ?
navigator.geolocation :
({
getCurrentPosition(success, failure) {
failure(`Your browser doesn't support geolocation.`);
},
})
);
geolocation.getCurrentPosition(
(position) => {
if (this.isUnmounted) { return; }
this.setState({
center: {
lat: position.coords.latitude,
lng: position.coords.longitude,
}
});
// formula to find the South west and North East points from lat,lon between 10km.
let lat_change = 10/111;
let lon_change = Math.abs(Math.cos(this.state.center.lat *(Math.PI/180)));
let sw_lat = this.state.center.lat - lat_change;
let sw_lon = this.state.center.lng - lon_change;
let ne_lat = this.state.center.lat + lat_change;
let ne_lon = this.state.center.lng + lon_change;
console.log(sw_lat, sw_lon, ne_lat, ne_lon);
console.log(this.state.center);
},
(reason) => {
if (this.isUnmounted) { return; }
this.setState({
center: geoMap.INITIAL_CENTER,
zoom: 5
});
}
);
は完全にロードされ、@FabianなどのgetBoundsは、コメントに記載されています。
1
最も簡単な方法は、Googleマップコンポーネントに5
にデフォルトのズームを設定するには、次のようになります。
<GoogleMap
ref="map"
defaultZoom={5}
defaultCenter={{ lat: -25.363882, lng: 131.044922 }}
>
defaultCenter
は、この形式でユーザのロケーションです。その後、
と、このような境界を取得:
let map = this.refs.map;
let bounds = map.getBounds();
let geoBounds = {
swLat: bounds.getSouthWest().lat(),
swLng: bounds.getSouthWest().lng(),
neLat: bounds.getNorthEast().lat(),
neLng: bounds.getNorthEast().lng(),
};
関連する問題
- 1. ズーム中にウェブサイトのコンテンツが動かないようにするにはどうすればよいですか?
- 2. d3js:バブルチャートをズームするにはどうすればいいですか?
- 3. leaflet.jsでズームをインターセプトするにはどうすればよいですか?
- 4. iOS:GPUImageでズームした画像をカメラから保存するにはどうすればいいですか?
- 5. WebページがiPhoneからズームされないようにするにはどうすればよいですか?
- 6. iOS描画アプリをズームするにはどうすればよいですか?
- 7. レスポンスレイアウトのズームを処理するにはどうすればよいですか?
- 8. iOSでズームしてダブルタップしてズームアウトするにはどうすればいいですか?
- 9. ハイチャート:シリーズを再描画ズーム計算から免除するにはどうすればいいですか?
- 10. 手動ズームでd3エラー
- 11. クロムレスポンスインスペクタがズームを変更しないようにするにはどうすればよいですか?
- 12. 壁紙がズームされないようにするにはどうすればいいですか
- 13. ズームするときにテーブルをきれいに保つにはどうすればいいですか?
- 14. ズームしてもモバイルブラウザで液体の改行を取得するにはどうすればよいですか?
- 15. ズームを使用してUIViewControllerを表示するにはどうすればよいですか?
- 16. metatagを使用してios端末のモバイルウェブサイトをズームするにはどうすればよいですか?
- 17. Ken Burns効果でズーム倍率のみをズームアウトするようにズーム係数を変更するにはどうすればよいですか?
- 18. タッチイベントでHTML 5キャンバスをピンチしたりズームしたりするにはどうすればよいですか?
- 19. UIScrollView contentLayoutガイドとズームを中心に
- 20. マウスホイールでズームを取得するには、ズーム-frm.elをEmacsにインストールするにはどうすればよいですか?
- 21. 読み込み時に地図をマーカーにズームするにはどうすればいいですか?
- 22. フレームセットを使用せずにIFRAMEコンテンツをズームするにはどうすればいいですか?
- 23. OpenLayers 3のズームをすべて遅くするにはどうしたらいいですか?
- 24. ズーム時にモバイルデバイスでwindow.innerHeightを使用するにはどうすればよいですか?
- 25. Google注釈付きタイムラインでマウススクロールホイールのズームを無効にするにはどうすればよいですか?
- 26. AndroidでChromeのズームを無効にするにはどうすればよいですか?
- 27. d3.jsズーム&パンタイムライン - ダイナミックタイムライン範囲を表示するにはどうすればいいですか?
- 28. JComponentsをどのようにパンしてズームできますか?
- 29. UIScrollViewのUIImageViewが中心にズームしない
- 30. ChromeOS/Androidでタッチパッドでピンチとズームを行うにはどうすればよいですか?
これは、マップコンポーネントがロードされてマウントされた後にのみ実装でき、それ以外の場合は「未定義」エラーが発生します。私のユースケースは、地図の境界がパラメータであるnodejのバックエンドapiからフェッチされたマップされたデータを表示することです。 –
V3のGoogle Maps APIには、このための機能は組み込まれていません。私があなただったら、どこかにロードインジケータを置き、マップが初期化された後にデータをロードします。ユーザーは、データが表示された直後にマップ上の位置を確認することができます。私見では。 –
スピナーやローダーがいい考えです。おかげでトン@ファビアン。私は境界を手動で計算することに取り組んでおり、すぐに出てくるものを投稿します –