如何在react-google-maps中获取地图[getZoom()]的当前缩放?
How to get the current zoom of the map [getZoom()] in react-google-maps?
我想在 react-google-maps 中获取我的地图的当前缩放级别,就像我们在简单的 google 地图 api 中使用 getZoom() 函数所做的那样。如何在 react-google-maps 中做到这一点?
我看了几个答案,但 none 个对我有用。
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/api
从下面复制基本模板,确保为 lat、lng 和 apiKey[= 赋值28=]
“@react-google-maps/api”中的 GoogleMap 组件采用函数类型的属性 onLoad。
此 onLoad 函数采用默认参数,即 map.
的当前实例
我在这里使用反应挂钩来设置我的功能组件中的状态,您也可以使用基于 class 的组件。只是当前地图实例的setState。
import React from "react"
import { GoogleMap, LoadScript } from "@react-google-maps/api"
const apikey = "YOUR_API_KEY_HERE"
// lat and lng are float numbers not string
const lat = lat_value
const lng = lng_value
const Map = props => {
const [map, setMap] = React.useState(null)
return (
<LoadScript id="script-loader" googleMapsApiKey={apikey}>
<GoogleMap
// set the state with the current instance of map.
onLoad={map => {
setMap(map)
}}
mapContainerStyle={{
height: "400px",
width: "800px",
}}
zoom={16}
center={{
lat: lat,
lng: lng,
}}
id="example-map"
// here onZoomChanged we are accessing the current zoom value from our map
//instance which is stored in the state
onZoomChanged={() => {
console.log(map.getZoom())
}}
>
...Your map components
</GoogleMap>
</LoadScript>
)
}
export default Map
这应该会在您更改地图缩放比例后立即在控制台中记录当前缩放值。
来自 react-google-maps
的 GoogleMap
组件公开了 onZoomChanged
方法,该方法对应于本地 Google 地图 zoom_changed
事件,一旦地图的缩放级别发生变化就会触发
这是一个如何在 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
prop:
从子组件传递当前缩放
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>
);
};
我想在 react-google-maps 中获取我的地图的当前缩放级别,就像我们在简单的 google 地图 api 中使用 getZoom() 函数所做的那样。如何在 react-google-maps 中做到这一点?
我看了几个答案,但 none 个对我有用。
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/api
从下面复制基本模板,确保为 lat、lng 和 apiKey[= 赋值28=]
“@react-google-maps/api”中的 GoogleMap 组件采用函数类型的属性 onLoad。 此 onLoad 函数采用默认参数,即 map.
的当前实例我在这里使用反应挂钩来设置我的功能组件中的状态,您也可以使用基于 class 的组件。只是当前地图实例的setState。
import React from "react"
import { GoogleMap, LoadScript } from "@react-google-maps/api"
const apikey = "YOUR_API_KEY_HERE"
// lat and lng are float numbers not string
const lat = lat_value
const lng = lng_value
const Map = props => {
const [map, setMap] = React.useState(null)
return (
<LoadScript id="script-loader" googleMapsApiKey={apikey}>
<GoogleMap
// set the state with the current instance of map.
onLoad={map => {
setMap(map)
}}
mapContainerStyle={{
height: "400px",
width: "800px",
}}
zoom={16}
center={{
lat: lat,
lng: lng,
}}
id="example-map"
// here onZoomChanged we are accessing the current zoom value from our map
//instance which is stored in the state
onZoomChanged={() => {
console.log(map.getZoom())
}}
>
...Your map components
</GoogleMap>
</LoadScript>
)
}
export default Map
这应该会在您更改地图缩放比例后立即在控制台中记录当前缩放值。
react-google-maps
的 GoogleMap
组件公开了 onZoomChanged
方法,该方法对应于本地 Google 地图 zoom_changed
事件,一旦地图的缩放级别发生变化就会触发
这是一个如何在 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
prop:
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>
);
};