Javascript 谷歌地图API-如何居中标记和地图

我已经使用了

javascript

的

geolocation

。所以我创建了一个

react

组件，它显示了您当前的位置。我想用谷歌地图将其可视化。到目前为止，它工作正常，但是，如果当前位置移动到“开始”贴图之外，则贴图不会平移。我的目标是标记始终居中，并且地图滚动。 这就是我目前所拥有的。当前位置通过props

props.latitude

和

props.longitude

传递给组件

更新

现在我知道为什么这不起作用了

window.google.maps.Map（document.getElementsByClassName（“谷歌地图”））

它不起作用。它不会以这种方式找到地图。因此它无法更新其属性。 有人知道如何访问当前地图吗

代码如下：

import React, {useState,useRef,useCallback} from 'react';
import { compose, withProps } from "recompose"
import { withScriptjs, withGoogleMap, GoogleMap, Marker } from "react-google-maps"

function Map(props) {
  const [center, setCenter] = useState({ lat: props.latitude, lng: props.longitude });
  const refMap = useRef(null);

  const handlePositionChanged = () => {
    let position = new window.google.maps.LatLng(parseInt(props.latitude), parseInt(props.longitude));
    window.google.maps.Marker(document.getElementsByClassName("google-map-marker")).setPosition(position);
    window.google.maps.Map(document.getElementsByClassName("google-map")).setCenter(position);
  };

  return (
    <GoogleMap
      className="google-map"
      ref={refMap}
      defaultZoom={19}
      mapTypeId='satellite'
      defaultCenter={{ lat: props.latitude, lng: props.longitude }} 
      onBoundsChanged={useCallback(handlePositionChanged)}
    >
      <Marker className="google-map-marker" position={{ lat: props.latitude, lng: props.longitude }} position_changed={useCallback(handlePositionChanged)} />
    </GoogleMap>
  );
}

export default compose(
  withProps({
    googleMapURL: "https://maps.googleapis.com/maps/api/js?key=AIz&v=3.exp&libraries=geometry,drawing,places",
    loadingElement: <div style={{ height: `100%` }} />,
    containerElement: <div style={{ height: `500px` }} />,
    mapElement: <div style={{ height: `100%` }} />,
  }),
  withScriptjs,
  withGoogleMap
)((props) => <Map latitude={props.latitude} longitude={props.longitude} />);

import React，{useState，useRef，useCallback}来自'React'；
从“重新组合”导入{compose，withProps}
从“反应谷歌地图”导入{withScriptjs，withGoogleMap，GoogleMap，Marker}
功能图（道具）{
const[center，setCenter]=useState（{lat:props.lation，lng:props.longitude}）；
const refMap=useRef（null）；
常量handlePositionChanged=（）=>{
让position=newwindow.google.maps.LatLng（parseInt（props.latitude）、parseInt（props.longitude））；
window.google.maps.Marker（document.getElementsByClassName（“谷歌地图标记”））.setPosition（位置）；
window.google.maps.Map（document.getElementsByClassName（“谷歌地图”））.setCenter（位置）；
};
返回(
);
}
导出默认组合(
用道具({
谷歌地图网址：https://maps.googleapis.com/maps/api/js?key=AIz&v=3.exp&libraries=geometry，图纸，位置“，
加载元素：，
集装箱运输：，
mapElement:，
}),
用ScriptJS，
用谷歌地图
)（（道具）=>）；

你能给它一个ID而不是类名，然后通过.getElementById访问它吗？我已经试过了。这也不起作用…你仍然有这个问题@dns_nx吗？@evan是的，仍然没有找到解决方案。我明白了，你能提供一个代码沙盒或stackblitz，这样我们就可以完全重现这个问题吗？你能给它一个ID而不是一个类名，并通过.getElementById访问它吗？我已经试过了。这也不起作用…你仍然有这个问题@dns\u nx吗？@evan是的，仍然没有找到解决方案。我明白了，你能提供一个代码沙盒或stackblitz，这样我们就可以完全重现这个问题吗？