Question

我尝试使用react-google-maps呈现Google地图。在地图完全加载之前，我使用geolocation.navigator函数获取用户当前位置，但我需要使用用户的位置作为中心和预设缩放级别（例如5）来计算地图的边界。我怎样才能做到这一点？

Answer 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(),
};

Answer 2

最后，这就是我设法在给定中心的情况下手动计算地图边界的方法，而中心又由navigator.geolocation.getCurrentPosition函数返回。

此计算基于纬度到kms的转换，其中1度纬度变化等于约111.2 km。我正在从宽度为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
       });
   }
);

您还可以使用加载程序或微调器，直到地图完全加载，并在评论中提到@Babian的getBounds。

Answer 3

这是我对Google地图的反应方式：

centralizeOnMyLocation = () => {
  const { maps, map } = this.state;
  const { userLocation } = this.props;
  const center = {
    lat: userLocation.latitude,
    lng: userLocation.longitude,
  };
  const extendedZoomAccuracy = 0.005;
  const bounds = new maps.LatLngBounds();

  bounds.extend(center);

  if (bounds.getNorthEast().equals(bounds.getSouthWest())) {
    const extendPoint = new google.maps.LatLng(
      bounds.getNorthEast().lat() + extendedZoomAccuracy,
      bounds.getNorthEast().lng() + extendedZoomAccuracy
    );
    bounds.extend(extendPoint);
  }

  map.fitBounds(bounds);
  map.setCenter(center);
};

如何从中心计算地图LatLngBound并手动缩放？

3 个答案: