我想在 react-google-maps 中获取 map 的当前缩放级别,就像我们在简单的 google map api 中使用 getZoom() 函数所做的那样。如何在 react-google-maps 中做到这一点?
我看过几个答案,但没有一个对我有用。
import React from "react"
import {
GoogleMap,
Marker,
withGoogleMap,
withScriptjs,
} from "react-google-maps"
const Map = () => {
return (
<GoogleMap
defaultZoom={15}
defaultCenter={{ lat: lat, lng: lng }}
>
<Marker position={{ lat: lat, lng: lng }} />
</GoogleMap>
)
}
const WrappedMap = withScriptjs(withGoogleMap(Map))
const Index = () => {
return (
<Layout>
<WrappedMap
googleMapURL={`https://maps.googleapis.com/maps/api/js?
key=my_key&v=3.exp&libraries=geometry,drawing,places`}
loadingElement={<Loading />}
containerElement={<div style={{ height: `400px` }} />}
mapElement={<div style={{ height: `100%` }} />}
/>
</Layout>
)
}
export default Index
如何为上面显示的示例获取缩放。
最佳答案
react-google-maps
中的
GoogleMap
组件公开了对应于原生 Google Map zoom_changed
事件的 onZoomChanged
方法并在 map 的缩放级别更改时触发
这是一个如何在 WrappedMap
组件中检索当前缩放的示例:
const Map = ({center,zoom}) => {
function handleZoomChanged(){
console.log(this.getZoom()) //this refers to Google Map instance
}
return (
<GoogleMap defaultZoom={zoom} defaultCenter={center} onZoomChanged={handleZoomChanged} >
<Marker position={center} />
</GoogleMap>
);
};
另一种选择是通过 onZoomChanged
属性从子组件传递当前缩放:
const Map = ({ center, zoom, onZoomChanged }) => {
function handleZoomChanged() {
onZoomChanged(this.getZoom()); //current zoom
}
return (
<GoogleMap
defaultZoom={zoom}
defaultCenter={center}
onZoomChanged={handleZoomChanged}
>
<Marker position={center} />
</GoogleMap>
);
};
然后引入 currentZoom
状态将当前缩放级别存储在父组件中:
const App = () => {
const [currentZoom, setCurrentZoom] = useState(5);//default
//print current Map zoom on button click
function handleClick() {
console.log(currentZoom);
}
function handleZoomChanged(newZoom) {
setCurrentZoom(newZoom);
}
return (
<div>
<button onClick={handleClick}>Get Zoom</button>
<Map
googleMapURL="https://maps.googleapis.com/maps/api/js?key=AIzaSyDurZQBXjtSzKeieXwtFeGe-jhZu-HEGQU"
loadingElement={<div style={{ height: `100%` }} />}
containerElement={<div style={{ height: `400px` }} />}
mapElement={<div style={{ height: `100%` }} />}
center={{ lat: -40.4338962, lng: 166.3297536 }}
zoom={currentZoom}
onZoomChanged={handleZoomChanged}
/>
</div>
);
};
关于reactjs - 如何在 react-google-maps 中获取 map [getZoom()] 的当前缩放?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56691152/