我正在使用来自@react-google-maps/api GoogleMap组件,但似乎无法找到移动后如何获得当前居中的地图坐标(lat & lng)?

通过四处搜索,我发现了这篇文章,它提出了一个类似的问题,但没有一个答案对我有用。 下面是我正在测试的代码。

import { GoogleMap, useLoadScript } from "@react-google-maps/api";

const { isLoaded, loadError } = useLoadScript({
    googleMapsApiKey: process.env.REACT_APP_GOOGLE_MAPS_API_KEY,
});

export default function Test() {
    return (
        <>
            <GoogleMap
                zoom={8}
                center={{lat: 35.6676095, lng: 139.334863}}
                // onCenterChanged={getCenter} - doesn't work
                // onCenterChanged={getCenter()} - doesn't work
                // onCenterChanged={this.getCenter} - doesn't work
                // onCenterChanged={ (e)=> this.getCenter(e)}  - doesn't work
            >
            </GoogleMap>
        </>
    );
}

地图加载正常,但是一旦我添加了onCenterChanged=道具,一切都会中断,因为显然没有声明getCenter函数。

我想在移动地图后获得一个带有中心坐标的变量或状态。 我在哪里声明它以及如何使用它?

===============>>#1 票数:0 已采纳

您需要在 onLoad 期间获取地图的实例,然后使用将使用初始值为 null 保存此实例的状态。 在您的onCenterChanged函数中,检查您的地图实例的值是否不为空,然后获取其新中心。 这是使用以下示例代码和代码片段实现的:

import React, { useState } from 'react';
import { GoogleMap } from '@react-google-maps/api';
const defaultLocation = { lat: 11.174036305817275, lng: 76.3754534171875 };

function Map() {
  const [mapref, setMapRef] = React.useState(null);
  const handleOnLoad = map => {
    setMapRef(map);
  };
  const handleCenterChanged = () => {
    if (mapref) {
      const newCenter = mapref.getCenter();
      console.log(newCenter);
    }
  };

  return (
    <GoogleMap
      center={defaultLocation}
      zoom={8}
      onLoad={handleOnLoad}
      onCenterChanged={handleCenterChanged}
      mapContainerStyle={{ width: '100%', height: '88vh' }}
    />
  );
}

export default Map;

  ask by Smlok translate from so

未解决问题?本站智能推荐:

1回复

使用react-google-maps从谷歌地图获取纬度/经度

I have my map component我有我的地图组件const MyMapComponent = withScriptjs( withGoogleMap(props => ( <GoogleMap defaultZoom={8} defaultCen
2回复

如何使用react-google-maps通过点击在地图上添加标记?

I'm struggling to find a very simple example of how to add a marker(s) to a Google Map when a user left clicks on the map using React-google-maps in
1回复

使用@react-google-maps/api的CORS错误

I'm running into a CORS error with the onClick function setting.我在使用onClick函数设置时遇到了CORS错误。 I'm just setting up static markers (markers there on page l
2回复

react-google-maps将地图缩放为圆形

This is mainly a question about 'translating' JS to JSX. 这主要是关于将JS翻译成JSX的问题。 I have a react-google-maps map which contains a marker, and a circle ar
1回复

我可以在React-google-maps中使用OverlappingMarkerSpiderfier吗?

I'm working on a project which uses react-google-maps ( https://github.com/tomchentw/react-google-maps ) library. 我正在开发一个使用react-google-maps ( https:
1回复

react-google-maps/api避免在某些状态更改后重新渲染地图

I was having problems where my GoogleMaps instance would refresh and self center itself on some onClick function where the state was being set and the