如何在 React 中更改 Google Maps api 的 infoWindow 属性?

问题描述 投票:0回答:0

我是一名学习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中写下了更改内容的代码,但这也没有反映出来。 我不确定是什么问题。请帮助我。

reactjs google-maps infowindow react-google-maps
© www.soinside.com 2019 - 2024. All rights reserved.