要在@react-google-map/api组件上更改标记的颜色和添加信息窗口,你可以按照以下步骤进行操作:
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;
这样,你就可以在@react-google-map/api组件上更改标记的颜色和添加信息窗口了。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云