如何在网络应用的单独文件中回调Google Maps init

古明煦

2023-03-14

问题内容：

当我有Google Maps API片段时：

<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>

在中index.html，出现错误：Uncaught InvalidValueError: initMap is not a function。

我想将所有bower_component，CSS，API和脚本声明保存在index.htmlYeoman支架的AngularJS
Web应用程序上的文件中。我实际上试图重新创建的地图将位于另一条路线上，我们称其为“
afterlogin”路线，仅是基本地图。我分开JS和HTML HTML组件成afterlogin.js和afterlogin.html

有很多潜在的原因。此处介绍的其中一项功能是调整调用以匹配名称空间。这需要角度服务吗？如果是这样，该服务将如何initMap在GoogleMaps api代码段的函数及其调用中起作用？

并发症之一是订购。我是Web应用程序开发人员的新手，但index.html首先我可以告诉负载，它使用代码段中的url回调了该initMap函数，该函数<script>...</script>在index.html文件或app.js文件中均未提供。相反，由于init函数位于路由的js代码中，因此无法看到它，因此需要某种“命名空间”版本的调用。即使从登录路径也将导致控制台错误，甚至在div映射的位置也不会。

-—编辑：----

另请注意，在这种情况下，这并没有解决问题：

window.initMap = function(){
//...
}

这也并不适用，因为永远不会调用该函数：UncaughtInvalidValueError：initMap不是函数
------

afterlogin.js

angular.module('myappproject').controller('AfterloginCtrl', function ($scope) {

  function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 17,
      center: {lat: -33.8666, lng: 151.1958}
    });

    var marker = new google.maps.Marker({
      map: map,
      // Define the place with a location, and a query string.
      place: {
        location: {lat: -33.8666, lng: 151.1958},
        query: 'Google, Sydney, Australia'

      },
      // Attributions help users find your site again.
      attribution: {
        source: 'Google Maps JavaScript API',
        webUrl: 'https://developers.google.com/maps/'
      }
    });

    // Construct a new InfoWindow.
    var infoWindow = new google.maps.InfoWindow({
      content: 'Google Sydney'
    });

    // Opens the InfoWindow when marker is clicked.
    marker.addListener('click', function() {
      infoWindow.open(map, marker);
    });
  }
 });

afterlogin.html

<!DOCTYPE html>
<html>
    <head>
        <title>after login page</title>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
        <meta charset="utf-8">
        <style>
            html, body {
                height: 100%;
                margin: 0;
                padding: 0;
                }
            #map {
                height: 100%;
            }
        </style>
    </head>
    <body>

        <div id="map"></div>

    </body>
</html>

问题答案：

由于Google Maps SDK脚本加载了同步（由于async属性），因此callbackURL中存在参数。

要解决该问题，您需要了解asyncGoogle SDK中的机制

async属性可让浏览器在加载Maps JavaScript API时呈现网站的其余部分。API准备就绪后，它将调用使用callback参数指定的函数。

https://developers.google.com/maps/documentation/javascript/tutorial#Loading_the_Maps_API

因此，解决方案是加载脚本同步：

在加载Maps JavaScript API的脚本代码中，可以省略async属性和callback参数。这将导致在下载API之前，API的加载将被阻止。

这可能会减慢您的页面加载速度。但这意味着您可以假定已加载API来编写后续脚本标签。

https://developers.google.com/maps/documentation/javascript/tutorial#sync

您可以通过async这种方式删除属性，页面将停止运行，直到脚本完成下载并在页面上运行。因此，当浏览器访问您的代码时，所有SDK对象都将可用。
现在，由于没有调用该initMap函数的代码（请记住：谁调用了它，是仅在async模式下调用它的是sdk脚本），因此您需要自己调用它。因此，只需在控制器末尾调用它即可。

如何在网络应用的单独文件中回调Google Maps init

相关阅读

相关文章

相关问答

相关工具

相关文档