javascript - 为什么我会收到此错误消息？ "Uncaught Initmap is not a function"

Question

已关闭。此问题需要 debugging details 。目前不接受答案。

---

编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem 。这将有助于其他人回答问题。

已关闭 4 年前。

Improve this question

我在 codepen 上使用谷歌地图 api。错误是这样说的:Ob {message: "initMap is not a function", name: "InvalidValueError", stack: "Error↵ at new Ob (我的 api key 写在这里)}

我不确定我的 CDN 是否错误，或者 codepen 是否未针对使用 google map api 进行优化。 map 有时会显示，当我刷新页面时它就会消失。然后它又随机出现。当它出现时，它看起来很棒。它只是并不总是出现。我有一个div id="map></div>并按照 google map API 的建议将其高度设置为 100%。

控制台错误让我确信这一定是我编写 JS 的方式有问题。

任何帮助将不胜感激。

这里是 pen 的链接

这是我的 JavaScript:

function initMap() {

    var frogner = {
        info: '<strong>Lucky Cup Frogner</strong><br>\
                    Bygdøy allé 17<br> 0267 Oslo<br>\
                    <a href="https://www.google.com/maps/place/Bygd%C3%B8y+all%C3%A9+17,+0262+Oslo/@5 9.9139519,10.728967,17z/data=!4m5!3m4!1s0x46416dd3446793cd:0x7273c747063 39df0!8m2!3d59.9160077!4d10.7133661?shorturl=1">Get Directions</a>',
        lat: 59.916010,
        long: 10.713385
    };
  var majorstuen = {
    info: '<strong>Lucky Cup Majorstuen</strong><br>\
                    Neuberggata 20<br> 0367 Oslo<br>\
                    <a href="https://www.google.com/maps/place/Neuberggata+20,+0367+Oslo/@59.9275959, 10.7143379,17z/data=!3m1!4b1!4m5!3m4!1s0x46416dda68bbe857:0x45907dac0cbd fae9!8m2!3d59.9275932!4d10.7165266?shorturl=1">Get Directions</a>',
        lat: 59.927557,
        long: 10.716551
  };
  var vika = {
    info: '<strong>Lucky Cup Vika</strong><br>\
                    Haakon VIIs gate 5<br> 0161 Oslo<br>\
                    <a href="https://www.google.com/maps/place/Haakon+VIIs+gate+5,+0161+Oslo/@59.9139 519,10.728967,17z/data=!3m1!4b1!4m5!3m4!1s0x46416e7e1b3dfd45:0xc77d49113 796fa12!8m2!3d59.9139492!4d10.7311557?shorturl=1">Get Directions</a>',
        lat: 59.913833,
        long: 10.731125
  };

  var locations = [
    [frogner.info, frogner.lat, frogner.long, 0],
    [majorstuen.info, majorstuen.lat, majorstuen.long, 1],
    [vika.info, vika.lat, vika.long, 2],
  ];

    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 13,
        center: new google.maps.LatLng(59.921453, 10.718126),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

  var infowindow = new google.maps.InfoWindow({});

    var marker, i;

    for (i = 0; i < locations.length; i++) {
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            map: map
        });

        google.maps.event.addListener(marker, 'click', (function (marker, i) {
            return function () {
                infowindow.setContent(locations[i][0]);
                infowindow.open(map, marker);
            };
        })(marker, i));
    }
}

Answer 1

您的函数initMap用作回调。有时，Google map API 会在您的脚本运行且函数正确定义之前回调它。

如果您明智地设置加载顺序，那么在 CodePen 之外就不会有问题。

为了在 CodePen 中轻松同步，我会这样做:

加载函数后动态加载 Google map 脚本。

为此，请删除 <script>标记在 HTML 末尾，并在 JS 末尾添加以下内容:

const googleMapsScript = document.createElement('script');
googleMapsScript.src = 'https://maps.googleapis.com/maps/api/js?key=AIzaSyBorrLWWOEKylh4WCCBuNc4QF9QjX_n0Bw&callback=initMap';
document.head.appendChild(googleMapsScript);

这样应该可以 100% 正常工作。