reactjs 如何在google-maps-react中给我的标记添加信息窗口?

wi3ka0sx  于 2023-01-25  发布在  React
关注(0)|答案(1)|浏览(138)

我试着在Map的标记上添加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>
    );
}
eqqqjvef

eqqqjvef1#

由于您将单击标记以显示InfoWindow,因此您可以使用InfoWindow的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>
  );
};

相关问题