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

Question

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

我想使用onMouseOver和onMouseOut事件来显示一个带有(摘要)信息的标记，关于用户在实时谷歌地图上鼠标移动的任何功能。现有的javascript站点运行良好——它使用loadGeoJson方法向地图添加了大约3500个功能。

文档和示例展示了如何将positionprop传递给render方法中的Marker实例，但这只提供了一个静态标记位置。

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

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

在上面的片段中，dataMarker是对在map初始化期间(加载时)创建的单个标记实例的引用。

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

如何使用@react-google-maps/api实现类似的行为?

Answer 1

你可以设置@react-google-maps/api的Marker组件的位置，方法是使用use state在Marker's position parameter中传递你的位置值。更改此值将把当前标记实例移动到新坐标。

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

下面是代码片段和示例工作代码:

/*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;