时间戳

首页 > 解决方案 > 连接 JS，导致 Google 地图中出现“未捕获的承诺”错误

javascript - 连接 JS，导致 Google 地图中出现“未捕获的承诺”错误

问题描述

对 JS 不是很精通，也不是很了解 promises 是什么。但我会尽力描述这个问题。

在这个位置页面上，我有一些内联 JS 来输出谷歌地图。非常简单，并且在 JS 被插件连接之前可以正常工作。

所以奇怪的部分是当这个错误被抛出时，下面的代码根本不会输出。如果我删除连接它工作正常。这可能是 Wordpress 插件 (WP Rocket) 的问题，而不是特定于 javascript 的问题。我不确定，希望有任何提示。

编码：

        <script>function initMap() {
            var map = new google.maps.Map(document.getElementById('map'), {
                center: { lat: 41.559345, lng: -88.133326 },
                zoom: 16
            });
            //setMarkers(map);
          }

            function setMarkers(map) {

            marker = new google.maps.Marker({
                    position: {lat: 41.559345, lng: -88.133326},
                    map: map,
                     title: "Crest Hill",
                    //icon: customMarker
                });

                marker.addListener('click', function() {
                    map.setZoom(16);
                    map.setCenter(marker.getPosition());
                });
        }

        </script>

错误：

Uncaught (in promise) Mc {message: "initMap is not a function", name: "InvalidValueError", stack: "Error↵    at new Mc (https://maps.googleapis.com/m…QpokXsxbUPOzocygFOXXXXX&callback=initMap:123:96"}

标签： javascriptwordpress

解决方案

正如您所说，串联正在将您initMap转换为其他不是函数的东西。它似乎作为回调传递给 GoogleMapsAPI，当它尝试执行它时，您会收到错误消息。我会尝试以下方法：

1）将您的内联脚本提取到它自己的文件中，可能称为mapInitialiser.js.

2）在您的HTML中包含脚本<script src="pathToYourScript/mapInitialiser.js"></script>

3) 执行第 2 步意味着您需要考虑以下含义，如下所述：如何在 Web 应用程序的单独文件中回调 Google Maps init

4）从连接中排除该文件。您可以在这篇WP-rocket 文章中了解更多信息。

祝你好运！

推荐阅读