如何使用带有primereact的谷歌地图？

Question

我正在尝试使用作为primereact库一部分的GMap组件，但我一直收到以下错误：

未处理运行时错误ReferenceError:未定义

我正在开发一个next.js应用程序，下面是我从primerreact库复制/粘贴的简单代码：

import { GMap } from 'primereact/gmap';

const DealershipLocation = () => {

  const options = {
    center: {lat: 36.890257, lng: 30.707417},
    zoom: 12
};
  return (
    <div>
      <GMap options={options} style={{width: '100%', minHeight: '320px'}} />
    </div>
  )
}

export default DealershipLocation

Answer 1

从GMAP的展示来看，你似乎没有正确地加载Google。

添加这些功能..。key=XXX是你谷歌地图的关键所在

const loadGoogleMaps = (callback) => {
    const existingScript = document.getElementById('googleMaps');

    if (!existingScript) {
        const script = document.createElement('script');
        script.src = 'https://maps.google.com/maps/api/js?key=XXX';
        script.id = 'googleMaps';
        script.async = true;
        script.defer = true;
        document.body.appendChild(script);

        script.onload = () => {
            if (callback) callback();
        };
    }

    if (existingScript && callback) callback();
};

const removeGoogleMaps = () => {
    const mapScript = document.getElementById('googleMaps');

    if (mapScript) {
        mapScript.parentNode.removeChild(mapScript);

        const head = document.getElementsByTagName('head')[0];
        const scripts = head.getElementsByTagName('script');
        for (let i = 0; i < scripts.length; i++) {
            let script = scripts[i];
            let src = script.src;

            if (src.startsWith('https://maps.google.com/maps')) {
                head.removeChild(script);
            }
        }
    }
};

然后把它装进一个反应钩..。

const [googleMapsReady, setGoogleMapsReady] = useState(false);

    useEffect(() => {
        loadGoogleMaps(() => {
            setGoogleMapsReady(true);
        });

        return () => {
            removeGoogleMaps();
        }
    }, []);