如何使用谷歌地图将多个标记居中并放大

Question

我发现了这个堆栈溢出链接，它使用了普通javascript，但它使用了我在google-maps-react API中看不到的方法，如LatLngBounds和bounds.extend()，但它确实有maps.fitbounds()。

我是不是错过了对API的误读，或者这些方法真的不存在于google-maps-react上。如果没有，我该如何在地图上的多个标记上居中并放大。

Answer 1

我不认为谷歌地图react有原生的方法来实现这一点，你必须直接通过onGoogleApiLoaded道具来使用谷歌地图api。

这个例子的Tidbit这个例子：

// Fit map to its bounds after the api is loaded
const apiIsLoaded = (map, maps, places) => {
// Get bounds by our places
const bounds = getMapBounds(map, maps, places);
// Fit map to bounds
map.fitBounds(bounds);
// Bind the resize listener
bindResizeListener(map, maps, bounds);
};
class Main extends Component {
constructor(props) {
super(props);
this.state = {
places: [],
};
}
componentDidMount() {
fetch('places.json')
.then((response) => response.json())
.then((data) => this.setState({ places: data.results }));
}
render() {
const { places } = this.state;
return (
<>
{!isEmpty(places) && (
<GoogleMap
defaultZoom={10}
defaultCenter={LOS_ANGELES_CENTER}
yesIWantToUseGoogleMapApiInternals
onGoogleApiLoaded={({ map, maps }) => apiIsLoaded(map, maps, places)}
>
{places.map((place) => (
<Marker
key={place.id}
text={place.name}
lat={place.geometry.location.lat}
lng={place.geometry.location.lng}
/>
))}
</GoogleMap>
)}
</>
);
}
}
export default Main;