如何在 React 中可视化 Google Maps 的地图？答案

【问题标题】：How can I visualize the map of Google Maps in React?如何在 React 中可视化 Google Maps 的地图？
【发布时间】：2021-05-25 19:04:01
【问题描述】：

我正在尝试创建一个组件，它是 Google Maps 地图的可视化。这是不使用google-map-react 库，因为我想制作自己的组件

import React from 'react'
import { Helmet } from 'react-helmet';
let map;
function initMap() {
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  });
}
export default function GoogleMap() {
    return (
        <>
            <Helmet>
                <script defer
                    src="https://maps.googleapis.com/maps/api/js?key=MYKEY&callback=initMap">
                </script>
            </Helmet>
            <div id="map"></div>
        </>
    )
}

这是我正在使用的代码，但由于某种原因，它没有绘制任何东西并且我收到紧身胸衣请求错误，老实说我迷失了，有人可以帮助我吗？至少知道我的错误是什么

访问获取 'https://maps.googleapis.com/maps/api/js?key=mykey&callback=initMap' 来自原产地“http://localhost:3000”已被 CORS 政策阻止：请求中不存在“Access-Control-Allow-Origin”标头资源。如果不透明的响应满足您的需求，请设置请求的模式为“no-cors”以获取禁用 CORS 的资源。这是我收到的错误消息，这就是我想知道的地方。

我是否需要使用 fetch 而不是直接使用脚本发出请求？

【问题讨论】：

标签： reactjs google-maps

【解决方案1】：

我尝试运行您的代码，但是，我得到一个不同的错误，即initMap is not a function。似乎脚本的回调正在寻找应该绑定到窗口window.initMap 的 initMap 函数。您可以通过在GoogleMap 函数内声明window.initMap 函数来实现此目的。下面是working code 和代码 sn-p：

import React from 'react'
import { Helmet } from 'react-helmet';
import './style.css'
let map;

export default function GoogleMap() {

 if (typeof window != "undefined") {
    window.initMap = () => {
      map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
  })
    }
    return (
        <>
            <Helmet>
                <script defer
                    src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=initMap">
                </script>
            </Helmet>
            <div id="map"></div>
        </>
    )
}
}

注意：不要忘记在 CSS 表单中为 div 类分配维度值。

【讨论】：