LatLngBoundを中心からズームして手動でズームするにはどうすればいいですか？

Question

react-google-mapsを使用してGoogleマップをレンダリングしようとしています。 地図が完全に読み込まれる前に、geolocation.navigator機能を使用してユーザーの現在地を取得しますが、ユーザーの位置を中心として地図の境界を計算する必要があります。 これを達成するには？

Answer 1

は最後にこれは私が手動で順番に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は、コメントに記載されています。

Answer 2

最も簡単な方法は、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(), 
};