如何在 google-maps-react 中向我的标记添加信息窗口？

Question

我尝试将 InfoWindows 添加到我的地图的标记中（使用 google-maps-react），但它不起作用，我不明白为什么。状态接收经纬度数据。

const InfoPage = ({data}) => {
    const [selectedElement, setSelectedElement] = useState(null)
 
    return (
    <div className="mapcontainer">
        <Map 
          google={google}
          initialCenter={
          {
            lat: 48.856614,
            lng: 2.3522219
          }
          } 
          zoom={12}>
        {data.map((element, index) => {
          return (
          <Marker 
          title={element.fields.nom} 
          position={{
           lat : element.fields.geo_point_2d[0],
           lng: element.fields.geo_point_2d[1]}} 
          onClick={()=>{setSelectedElement(element)}}
          />
          )})}
        {selectedElement ? (
           <InfoWindow
            position={{
            lat : selectedElement.fields.geo_point_2d[0],
            lng: selectedElement.fields.geo_point_2d[1]}} 
            onCloseClick={()=>{setSelectedElement(null)}}
            >
            <div>
              <h1>info</h1>
            </div>
            </InfoWindow>) : null }
       </Map>
    </div>
    );
}

Answer 1

由于您将单击要显示的信息窗口的标记，因此您可以使用信息窗口的 marker 参数而不是 position 参数。您还需要使用 InfoWindow 的 visible 参数并将其设置为 true 才能显示。您可以查看 simple code 我是如何做到的（我只是使用了 json 文件中的数据）。下面的代码片段：

import React, { useState } from "react";
import { Map, GoogleApiWrapper, Marker, InfoWindow } from "google-maps-react";

import data from "./data.json";

const InfoPage = () => {
  const [selectedElement, setSelectedElement] = useState(null);
  const [activeMarker, setActiveMarker] = useState(null);
  const [showInfoWindow, setInfoWindowFlag] = useState(true);

  return (
    <div className="mapcontainer">
      <Map
        google={google}
        initialCenter={{
          lat: 39.952584,
          lng: -75.165221
        }}
        zoom={8}
      >
        {data.map((element, index) => {
          return (
            <Marker
              key={index}
              title={element.name}
              position={{
                lat: element.lat,
                lng: element.lng
              }}
              onClick={(props, marker) => {
                setSelectedElement(element);
                setActiveMarker(marker);
              }}
            />
          );
        })}
        {selectedElement ? (
          <InfoWindow
            visible={showInfoWindow}
            marker={activeMarker}
            onCloseClick={() => {
              setSelectedElement(null);
            }}
          >
            <div>
              <h1>{selectedElement.name}</h1>
            </div>
          </InfoWindow>
        ) : null}
      </Map>
    </div>
  );
};

如何在 google-maps-react 中向我的标记添加信息窗口？

How to add an InfoWindow to my markers in google-maps-react?

reactjs

google-maps-api-3

marker

infowindow

google-maps-react