如何在 google-maps-react 中将 InfoWindow 添加到我的标记？答案

【问题标题】：How to add an InfoWindow to my markers in google-maps-react?如何在 google-maps-react 中将 InfoWindow 添加到我的标记？
【发布时间】：2021-05-28 22:45:33
【问题描述】：

我尝试将 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>
    );
}

【问题讨论】：

标签： reactjs google-maps-api-3 marker infowindow google-maps-react

【解决方案1】：

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

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

【讨论】：