标签: react-google-maps-api

我正在使用@react-google-maps/api在我的 React Web 应用程序中显示 Google 地图。根据他们的文档，我添加了标记，如下所示。

        <Marker
            onLoad={onLoad}
            position={location}
            
            icon={{
                // path: google.maps.SymbolPath.CIRCLE,
                url:'./../../assets/svg/location_marker.svg',
                scale: 7,
            }}
        />

Run Code Online (Sandbox Code Playgroud)

但它似乎不起作用。没有显示任何标记。使用google.maps.SymbolPath.CIRCLEaspath将显示标记图标。以前有人遇到过这个问题吗？有任何想法吗？

当我尝试访问文档时，给出以下错误 404 not found

我清除了所有缓存仍然给出相同的错误。没有其他可用的文档。 https://react-google-maps-api-docs.netlify.app/：-这是文档链接，每当我尝试访问它时都会出现 404 错误

我正在使用 @react-google-maps/api 在地图中显示一些标记。

我想在单击按钮时添加另一个标记，添加标记后，我希望地图居中，以便显示所有标记。据此，我写的是：

const center = {
  lat: 55.378,
  lng: 3.436
};

const containerStyle = {
    borderRadius: '10px',
    width: '100%',
    height: '100%'
}

function Map(props) {
    const [map, setMap] = useState();
    const [markers, setMarkers] = useState([
        {
            lat: 51.378, 
            lng: 3.436
        }, 
        {
            lat: 47.0902, 
            lng: -125.712
        }
    ]);

    useEffect(() => {
        var bounds = new window.google.maps.LatLngBounds();
        for(var i = 0; i < markers.length; i++) {
            bounds.extend( new window.google.maps.LatLng(markers[i].lat, markers[i].lng));
        }

        map.fitBounds(bounds)
    }, [markers])

    const onLoad = React.useCallback(function callback(map) …