Question

首先，我需要道歉，因为我的问题（问题）有点令人困惑。了解我应该简化我的代码，以便每个人都知道发生了什么，但这次我不能这样做。

我在React项目中获得了Google Map。有时候它有效，有时它不起作用。是什么让它有效？没什么，只是等待它。有时需要不到一分钟，我等待的最长时间是5分钟。

因此，在显示地图后，如果删除缓存和历史记录，地图将无法再次运行（一会儿）。它只显示一个空白页面。

这就是我编码的方式：

添加源链接以链接index.html底部的Google地图，只使用API密钥，但网址中没有回调。

<script src="https://maps.googleapis.com/maps/api/js?key={MY KEY HERE}" async defer></script>

在联系页面中，应该显示地图，我在componentDidMount（）部分中定义了一个Google Map对象。

const google = window.google;

componentDidMount(){

    var mapOptions = {
        // zoom, center, styles, etc go here
    }

    var mapElement = document.querySelector("#map")

    var map = new google.maps.Map(mapElement, mapOptions)
}

上面提到的问题，加载（等待）需要太多时间。即使最糟糕的是，即使地图已经显示，如果我刷新页面，它也可能会变成空白。

我确实考虑过在componentWillMount（）中定义Google Map对象，但在挂载之前，没有任何元素供我选择，因为定义Google Map无论如何都需要dom元素。

我还想到创建一个带有display的div：none样式并在主页上加载地图，但这根本没有意义。

我尝试的另一个解决方案是在compoentDidMount（）部分创建一个脚本元素，setAttribue将带有回调函数的链接放在元素中，然后将其附加到正文中，但这不起作用

你知道为什么会发生这种情况以及如何解决这个问题吗？

我的网站： https://kennytesting.000webhostapp.com/interior

网站上的联系页面： https://kennytesting.000webhostapp.com/interior/contacts

很抱歉再次提出了一个问题。

错误消息：未定义的地图＆lt; - 不太有用
使用localhost时工作正常，但不使用普通服务器。

Answer 1

这似乎是第二个问题，如果window.google;未准备就绪，那么您的挂载失败，因为new google.maps.LatLng将无法加载。我收到这个错误：

react-dom.production.min.js:151 TypeError: Cannot read property 'maps' of undefined
    at t.value (Map.js:23)

我会找到一种等待Google地图加载然后触发创建的方法。可能会使用事件查看How can I check whether Google Maps is fully loaded? 。

Google Map花费了太多时间加载到React项目中

1 个答案: