Question

我正在尝试以模块模式初始化Google Maps API，但我得到的只是错误：

Uncaught ReferenceError: google is not defined

和

Uncaught InvalidValueError: initMap is not a function

gmap.js：

var map,
    mapsAPI = (function() {
        function initMap() {
            map = new google.maps.Map(document.getElementById('mapAddress'), {
                center: {lat: -34.397, lng: 150.644},
                zoom: 8,
                scrollwheel: false
            });
        }

        function init() {
            mapsAPI.initMap();
        }

        window.addEventListener('load', init());
    }());

在我按此顺序加载的html中（请注意，我从此示例中删除了我的API密钥）：

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

<script src="scripts/gmap.js"></script>

如果我将initMap（）放在Global范围上，那么地图可以工作，但我试图避免使用全局变量。

我在这里错过了什么吗？

Answer 1

查看google maps API的脚本src链接。以下是the docs中提供的示例链接：

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

最后一个查询字符串参数是callback=initMap。

谷歌地图脚本在某些时候尝试调用此参数给出的回调函数。但是，如果它位于全局范围内，它将只能访问此initMap函数。

一般来说，不污染全局范围当然是一种好的做法，但是当它只是一个函数（你仍然可以隐藏其他变量/函数）时我不会担心它，你有充分的理由。

Answer 2

Register for a new key 并复制它。在JavaScript文件中使用此链接：https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap 在上面的网址中使用您的API密钥。

以模块模式初始化Maps API

2 个答案: