是否可以更改标记在@react-google-maps/api 中的位置？

Question

我有一个现有地图，它依赖于在 v3 Google Maps API 中对 Marker 的单个实例使用 setPosition 函数。我没有看到从@react-google-maps/api 导出的Marker 组件调用该函数的明显方法。

我想使用onMouseOver 和onMouseOut 事件来显示一个标记，其中包含用户在实时谷歌地图中鼠标悬停的任何特征的（摘要）信息。现有的 javascript 网站运行良好——它使用loadGeoJson 方法向地图添加大约 3,500 个功能。

文档和示例展示了如何在 render 方法中将 position 属性传递给 Marker 实例，但这仅提供静态标记位置。

在我当前的javascript 代码中，我在处理onMouseOver 事件时执行以下操作：

function mouseInToRegion(e) {
  //...
  dataMarker.setLabel({'text': 'some informative string'});
  dataMarker.setPosition(e.latLng);
  dataMarker.setVisible(true);
}

在上述片段中，dataMarker 是对在地图初始化期间（加载时）创建的单个标记实例的引用。

毫不奇怪，onMouseOut 处理程序除了调用 dataMarker.setVisible(false) 之外几乎没有什么作用。

如何使用@react-google-maps/api 完成类似的行为？

Answer 1

您可以设置@react-google-maps/api 的Marker 组件的位置，通过使用状态在Marker's position parameter 中传递您的位置值。更改 this 的值会将当前标记实例移动到新坐标。

我创建了一个示例代码，其中包含来自 json 文件的数据。我首先迭代并获取每个数据，并将每个数据放在一个段落中。然后每次你将鼠标悬停在每个段落上时，它都会传递该地方的数据。然后，您将使用数据并更改状态变量markerposition 和place。然后它将更新标记和信息窗口以显示该特定地点的详细信息。

这是一个代码 sn-p 和 sample working code:

/*global google*/
import ReactDOM from "react-dom";
import React from "react";

import { GoogleMap, Marker, InfoWindow } from "@react-google-maps/api";
import data from "./data.json";

const defaultLocation = { lat: 40.712775, lng: -74.005973 };

class Map extends React.Component {
  state = {
    markerposition: defaultLocation,
    place: "Default Position - New York"
  };



  onMouseOverEvent = place => {
    this.setState({
      markerposition: { lat: place.lat, lng: place.lng },
      place: place.name
    });
  };

  render() {
    return (
      <div>
        <GoogleMap
          center={defaultLocation}
          zoom={8}
          mapContainerStyle={{ height: "400px", width: "800px" }}
        >
          <Marker
            //onLoad={onLoad}
            position={this.state.markerposition}
          >
            <InfoWindow options={{ maxWidth: 100 }}>
              <span>{this.state.place}</span>
            </InfoWindow>
          </Marker>
        </GoogleMap>
        {data.map((place, index) => (
          <p key={index} onMouseOver={() => this.onMouseOverEvent(place)}>
            {place.name}
          </p>
        ))}
      </div>
    );
  }
}

export default Map;