Google Maps API - 如何使标记和地图居中答案

【问题标题】：Google Maps API - How to center marker and mapGoogle Maps API - 如何使标记和地图居中
【发布时间】：2020-03-10 01:36:37
【问题描述】：

我玩过javascript 的geolocation。所以我创建了一个react 组件，它显示了您当前的位置。我想用谷歌地图把它形象化。到目前为止它工作正常，但是，如果当前位置移动到起始地图之外，则地图不会平移。我的目标是标记始终居中，并且地图滚动。这就是我到目前为止所拥有的。当前位置正在通过 props.latitude 和 props.longitude 属性传递给组件。

更新

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

window.google.maps.Map(document.getElementsByClassName("google-map"))

不工作。它不会以这种方式找到地图。所以它不能更新它的属性。有人知道如何访问当前地图吗？

代码如下：

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} />);

【问题讨论】：

你能给它一个ID而不是className并通过.getElementById访问它吗？
我已经试过了。这也不起作用...
你还有这个问题@dns_nx 吗？
@evan 是的，仍然没有找到解决方案。
我明白了，您能否提供一个代码框或堆栈闪电战，以便我们可以完全重现此问题？

标签： javascript reactjs google-maps geolocation

【解决方案1】：

您可以使用state 值更改<GoogleMap/> center parameter 和<Marker/> position parameter，而不是使用window.google.maps. 设置地图中心和标记。因此，每次地理位置坐标发生变化时，您都需要更改地图中心和标记位置的状态值，然后这些更改将反映到地图上。这是一个示例代码sn-p：

import React, { Component } from 'react';
import { withGoogleMap, GoogleMap, Marker } from 'react-google-maps';

class Map extends Component {
  constructor(props) {
    super(props);

    this.state = {
      userPosition: { lat: 40.756795, lng: -73.954298 }
    };
  }

  onMapLoad = () => {
    navigator.geolocation.getCurrentPosition(position => {
      const { latitude, longitude } = position.coords;
      this.setState({
        userPosition: { lat: latitude, lng: longitude }
      });
    });
  };

  render() {
    const GoogleMapExample = withGoogleMap(props => (
      <GoogleMap
        center={this.state.userPosition}
        defaultZoom={13}
        onLoad={this.onMapLoad()}
      >
        <Marker position={this.state.userPosition} />
      </GoogleMap>
    ));

    return (
      <div>
        <GoogleMapExample
          containerElement={<div style={{ height: `500px`, width: '500px' }} />}
          mapElement={<div style={{ height: `100%` }} />}
        />
      </div>
    );
  }
}

export default Map;

【讨论】：