如何在@react-google-map/api组件上更改标记的颜色和添加信息窗口？

要在@react-google-map/api组件上更改标记的颜色和添加信息窗口，你可以按照以下步骤进行操作：

首先，确保你已经安装了@react-google-map/api组件，并在你的项目中引入它。
创建一个地图组件，并在其中引入GoogleMap、Marker和InfoWindow组件。例如：

import React, { useState } from 'react';
import { GoogleMap, Marker, InfoWindow } from '@react-google-maps/api';

const MapComponent = () => {
  const [selectedMarker, setSelectedMarker] = useState(null);

  const markers = [
    { id: 1, position: { lat: 37.7749, lng: -122.4194 }, color: 'red', info: 'Marker 1' },
    { id: 2, position: { lat: 37.7749, lng: -122.4294 }, color: 'blue', info: 'Marker 2' },
    // Add more markers as needed
  ];

  const handleMarkerClick = (marker) => {
    setSelectedMarker(marker);
  };

  return (
    <GoogleMap
      center={{ lat: 37.7749, lng: -122.4194 }}
      zoom={12}
      mapContainerStyle={{ height: '400px', width: '100%' }}
    >
      {markers.map((marker) => (
        <Marker
          key={marker.id}
          position={marker.position}
          onClick={() => handleMarkerClick(marker)}
          icon={{
            url: `https://maps.google.com/mapfiles/ms/icons/${marker.color}-dot.png`,
          }}
        />
      ))}

      {selectedMarker && (
        <InfoWindow
          position={selectedMarker.position}
          onCloseClick={() => setSelectedMarker(null)}
        >
          <div>{selectedMarker.info}</div>
        </InfoWindow>
      )}
    </GoogleMap>
  );
};

export default MapComponent;

在上述代码中，我们使用useState钩子来跟踪选中的标记，并在地图上渲染所有的标记。每个标记都有一个唯一的id、位置、颜色和信息。
通过设置Marker组件的icon属性，你可以更改标记的颜色。在上述代码中，我们使用Google提供的不同颜色的图标来表示不同的标记。你可以根据需要自定义图标，只需提供图标的URL即可。
当用户点击标记时，我们将选中的标记存储在selectedMarker状态中，并在InfoWindow组件中显示相关信息。你可以根据需要自定义信息窗口的内容和样式。

这样，你就可以在@react-google-map/api组件上更改标记的颜色和添加信息窗口了。

腾讯云相关产品和产品介绍链接地址：