您在此页面上多次包含 Google 地图 JavaScript API

Question

如何避免出现“您在此页面上多次包含 Google 地图 JavaScript API。这可能会导致意外错误。”如果我使用 google-map-react 显示地图并在另一个组件中使用 react-places-autocomplete 来获取地址和坐标？

//LocationMapPage  component that displays the map box and pass the props to it
class LocationMapPage extends Component {

  render() {
    let {latLng,name,address} = this.props.location;
    return (
        <MapBox lat={latLng.lat} lng={latLng.lng} name={name} address={address}/>
    )
  }

}

//MapBox component
import React from "react";
import GoogleMapReact from 'google-map-react';
import apiKey from "../../configureMap";


const Marker = () => <i className="fa fa-map-marker fa-2x text-danger" />

const MapBox = ({lat,lng, name, address}) => {
    const center = [lat,lng];
    const zoom = 14;
    return (  
        <div style={{ height: '300px', width: '100%' }}>
            <GoogleMapReact
            bootstrapURLKeys={{ key: apiKey }}
            defaultCenter={center}
            defaultZoom={zoom}
            >
            <Marker
                lat={lat}
                lng={lng}
                text={`${name}, ${address}`}
            />
            </GoogleMapReact>
      </div>
    );
}

export default MapBox;

地图是空白的： console:You 中的错误在此页面上多次包含 Google 地图 JavaScript API。这可能会导致意外错误。

如何解决？

我在项目中使用google-map-react, react-places-autocomplete。

Answer 1

作为我在两个不同组件中使用 google 映射 API 的特定用例的临时解决方案我刚刚在 index.html 中添加了脚本：

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>

我这样做是为了根据 react-places-autocomplete GitHub 页面上的文档避免该特定错误。

Answer 2

不幸的是，index.html 头部的 link 导致了同样的错误。我找到了另一个解决方法。不是最好的解决方案，但目前有效：

import React, { useEffect, useState } from 'react';
import GoogleMapReact from 'google-map-react';

export default () => {

    const [mapActive, setMapActive] = useState(false);

    useEffect(() => {
        const t = setTimeout(() => {
            setMapActive(true)
        }, 100);

        return () => {
            window.clearTimeout(t);
        };
    }, [])

    return (
            <>
                { mapActive && <GoogleMapReact
                    bootstrapURLKeys={ {
                        key: ...,
                        language: ...
                    } }
                    defaultCenter={ ... }
                    defaultZoom={ ... }
                >

                </GoogleMapReact> }
            </>
    );
};

您在此页面上多次包含 Google 地图 JavaScript API

You have included the Google Maps JavaScript API multiple times on this page

google-map-react