react-google-maps中的多个信息窗口无法传递标记id

问题描述：在react-google-maps中，如何实现多个信息窗口与标记id的传递？

回答：在react-google-maps中，可以通过以下步骤实现多个信息窗口与标记id的传递：

首先，确保你已经安装了react-google-maps库，并在项目中引入相关组件和依赖。
在你的React组件中，创建一个状态变量来存储标记id。可以使用useState钩子函数来实现：

import React, { useState } from 'react';

const MyMapComponent = () => {
  const [selectedMarkerId, setSelectedMarkerId] = useState(null);

  // 其他代码...

  return (
    // 渲染地图组件和标记
  );
};

export default MyMapComponent;

在地图组件中，为每个标记设置一个点击事件处理函数。当标记被点击时，将标记的id存储到状态变量中：

import React, { useState } from 'react';
import { Marker, InfoWindow } from 'react-google-maps';

const MyMapComponent = () => {
  const [selectedMarkerId, setSelectedMarkerId] = useState(null);

  const handleMarkerClick = (markerId) => {
    setSelectedMarkerId(markerId);
  };

  // 其他代码...

  return (
    // 渲染地图组件和标记
    <Marker
      position={{ lat: 37.7749, lng: -122.4194 }}
      onClick={() => handleMarkerClick('marker1')}
    />
    <Marker
      position={{ lat: 37.7739, lng: -122.4312 }}
      onClick={() => handleMarkerClick('marker2')}
    />
    // 其他标记...
  );
};

export default MyMapComponent;

在地图组件中，使用InfoWindow组件来显示信息窗口。根据选中的标记id，决定哪个信息窗口应该显示：

import React, { useState } from 'react';
import { Marker, InfoWindow } from 'react-google-maps';

const MyMapComponent = () => {
  const [selectedMarkerId, setSelectedMarkerId] = useState(null);

  const handleMarkerClick = (markerId) => {
    setSelectedMarkerId(markerId);
  };

  // 其他代码...

  return (
    // 渲染地图组件和标记
    <Marker
      position={{ lat: 37.7749, lng: -122.4194 }}
      onClick={() => handleMarkerClick('marker1')}
    >
      {selectedMarkerId === 'marker1' && (
        <InfoWindow>
          {/* 在这里显示相关信息 */}
        </InfoWindow>
      )}
    </Marker>
    <Marker
      position={{ lat: 37.7739, lng: -122.4312 }}
      onClick={() => handleMarkerClick('marker2')}
    >
      {selectedMarkerId === 'marker2' && (
        <InfoWindow>
          {/* 在这里显示相关信息 */}
        </InfoWindow>
      )}
    </Marker>
    // 其他标记...
  );
};

export default MyMapComponent;

通过以上步骤，你可以在react-google-maps中实现多个信息窗口与标记id的传递。根据选中的标记id，显示相应的信息窗口。你可以根据实际需求，自定义信息窗口的内容和样式。

腾讯云相关产品推荐：腾讯云地图服务（https://cloud.tencent.com/product/tianditu）提供了丰富的地图展示和地理位置相关的功能，可以与react-google-maps结合使用，实现更多地图相关的需求。

react-google-maps中的多个信息窗口无法传递标记id

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐