首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

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

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

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

  1. 首先,确保你已经安装了react-google-maps库,并在项目中引入相关组件和依赖。
  2. 在你的React组件中,创建一个状态变量来存储标记id。可以使用useState钩子函数来实现:
代码语言:txt
复制
import React, { useState } from 'react';

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

  // 其他代码...

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

export default MyMapComponent;
  1. 在地图组件中,为每个标记设置一个点击事件处理函数。当标记被点击时,将标记的id存储到状态变量中:
代码语言:txt
复制
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;
  1. 在地图组件中,使用InfoWindow组件来显示信息窗口。根据选中的标记id,决定哪个信息窗口应该显示:
代码语言:txt
复制
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结合使用,实现更多地图相关的需求。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

领券