我是一名学习react的学生。 在使用 google map api 时,我发现了一个叫做 infoWindowOptions 的东西, 我尝试更改用户界面以使其对用户来说看起来不错。 这是我的代码。 现在我使用 @react-google-maps/api 包。 我遇到了无法修复信息窗口的问题。
import React, { useState } from "react";
import {
GoogleMap,
InfoWindow,
Marker,
LoadScript,
} from "@react-google-maps/api";
function Map() {
const apiKey = process.env.REACT_APP_GOOGLE_API_KEY;
const [currentPosition, setCurrentPosition] = useState(null);
const [selectedMarker, setSelectedMarker] = useState(null);
const containerStyle = {
position: "absolute",
top: 0,
left: 0,
width: "100%",
height: "100%",
};
const success = (position) => {
const latitude = position.coords.latitude;
const longitude = position.coords.longitude;
setCurrentPosition({ lat: latitude, lng: longitude });
};
const error = () => {
console.log("Unable to retrieve your location");
};
const getCurrentLocation = () => {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success, error);
} else {
console.log("Geolocation is not supported by this browser.");
}
};
React.useEffect(() => {
getCurrentLocation();
}, []);
const infoWindowOptions = {
backgroundColor: "purple",
};
return (
<LoadScript googleMapsApiKey={apiKey}>
<GoogleMap
mapContainerStyle={containerStyle}
center={currentPosition}
zoom={13}
>
{currentPosition && <Marker position={currentPosition} />}
{selectedMarker && (
<InfoWindow
options={infoWindowOptions}
position={selectedMarker.position}
onCloseClick={() => setSelectedMarker(null)}
/>
)}
</GoogleMap>
</LoadScript>
);
}
export default Map;
我写了一个改变infoWindow背景的code代码,但是效果不好
const infoWindowOptions = {
backgroundColor: "purple",
};
我也尝试过这样的传递对象的方法
const infoWindowOptions = {
options: {
backgroundColor: "purple",
},
};
并且我在infoWindowOption中写下了更改内容的代码,但这也没有反映出来。 我不确定是什么问题。请帮助我。