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

Question

我有一个现有地图，它依赖于在 v3 Google 地图 API 中对 Marker 的单个实例使用 setPosition 函数。我没有看到从 @react-google-maps/api.

导出的 Marker 组件调用该函数的明显方法

我想使用 onMouseOver 和 onMouseOut 事件来显示一个标记，其中包含有关用户在实时 Google 地图中鼠标悬停的任何要素的（摘要）信息。现有的 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组件的位置，通过use state传递你在Marker's position parameter中位置的值。更改此值会将当前标记实例移动到新坐标。

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

这是一个代码片段和 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;

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

Is it possible to CHANGE the position of a Marker in @react-google-maps/api?

google-maps

react-google-maps