4

React Google Maps ライブラリによると、これら 4 つのメソッドを ref オブジェクトから呼び出すことができます。

奇妙なことに、これらのメソッドは次のように、マップ インスタンスとその他の引数の 2 つのパラメーターを受け取ることになっています。

fitBounds(map, args) { return map.fitBounds(...args); }

ただし、この方法で fitBounds() を呼び出すと、マップ上で何も起こらず、境界が変更されず、エラーもスローされません。これは、componentDidUpdate で fitBounds を呼び出して、コンポーネントを構成した方法です。

import React from 'react'
import { withGoogleMap, GoogleMap, InfoWindow, Marker, OverlayView } from 'react-google-maps'
import InfoBox from 'react-google-maps/lib/addons/InfoBox'
import map from 'lodash/map'

// Higher-Order Component
const AllocatedPlacesMap = withGoogleMap(props => (
  <GoogleMap
    center={props.center}
    defaultZoom={4}
    options={{ scrollwheel: false, minZoom: 3, maxZoom: 15 }}
    onCenterChanged={props.onCenterChanged}
    ref={props.onMapMounted}>
    {props.markers.map((marker, index) => (
      <Marker
        key={index}
        position={marker.position}
      />
    ))}
  </GoogleMap>
));

class Map extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
    };
  }

  getCenter = () => {
    this._bounds = new google.maps.LatLngBounds();

    this.props.markers.forEach((marker, index) => {
      const position = new google.maps.LatLng(marker.lat, marker.lng);
      this._bounds.extend(position);
    });

    return this._bounds.getCenter();
  }

  componentDidUpdate() {
    this._map.fitBounds(this._map, this._bounds);
  }

  handleMapMounted = (map) => {
    this._map = map;
  }

  render() {
    return (
      <div className="allocated-places">
        <AllocatedPlacesMap
          containerElement={
            <div style={{ height: `100%` }} />
          }
          mapElement={
            <div style={{ height: `100%` }} />
          }
          center={this.getCenter()}
          markers={props.markers}
          onMapMounted={this.handleMapMounted}
        />
      </div>
    )
  }
}

export default Map;

この場合、 fitBounds() を呼び出す正しい方法は何ですか? この点に関して、ドキュメントと例が不足しているようです。

4

2 に答える 2

1

関数定義fitBounds(map, args) { return map.fitBounds(...args); }を見ると、拡散演算子が引数に適用されていることがわかります。argsこれは、 が配列であることを示唆しています。

したがって、コードでは、2 番目のパラメーターは配列型である必要があります。

this._map.fitBounds(this._map, [this._bounds]);

paddingMaps JavaScript API fitBound()メソッドの 2 番目のオプション パラメータに変換される配列の 2 番目の要素を含めることもできます。

this._map.fitBounds(this._map, [this._bounds, 100]);

お役に立てれば！

于 2017-06-13T11:11:51.710 に答える