个人中心
gpt4 book ai didi

javascript - 如何解析 "Uncaught ReferenceError: google is not defined"？ (谷歌地图 API)

转载 作者：行者123 更新时间：2023-11-28 15:09:35 24 4
gpt4 key购买 nike

我有一个项目，其中包括显示谷歌地图，其中包含与城市地点相关的信息(兴趣点，例如学校、餐厅、地铁......)但我必须先学会使用 API。

我很难显示一个简单的标记，事实上我在 Chrome 控制台中出现了“Uncaught ReferenceError: google is not Defined”并且标记没有出现。我在论坛上到处搜索，但没有任何帮助。

我为您提供我的小 HTML 代码:

    <!DOCTYPE html>
 <html>
 <head>
 </head>
 <body>
 <p> TEST MAP </p>
<div id="map" style="height: 500px; width:900px;"></div>



<script type="text/javascript" src="test.js"></script>

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

<!-- Si le script n'est pas lu par le navigateur -->
<noscript>
    <p>Attention : </p>
    <p>Afin de pouvoir utiliser Google Maps, JavaScript doit être activé.</p>
    <p>Or, il semble que JavaScript est désactivé ou qu'il ne soit pas supporté par votre navigateur.</p>
    <p>Pour afficher Google Maps, activez JavaScript en modifiant les options de votre navigateur, puis essayez à nouveau.</p>
</noscript>

</body>
</html>

然后，这是我的 Javascript 代码:

    var maCarte;

    function initMap() {
        var optionsCarte = {
        center: {lat: 43.4810896, lng: -1.540436},
        zoom: 16
      }
      maCarte = new google.maps.Map(document.getElementById("map"),optionsCarte);
    }

    // Création d'un marqueur sur la carte : Ne fonctionne pas
    var optionsMarqueur = {
                        position: {lat: 43.4810896, lng: -1.540436}, 
                        map: maCarte
                    };

    var marqueur = new google.maps.Marker(optionsMarqueur);

最佳答案

Google map 会异步加载 - 即使您直接包含脚本标记也是如此。因此，在回调(您已将其指定为 initMap)之前，请勿使用任何 google.maps 类(例如 google.maps.Marker) >).

修改 test.js，以便在 initMap 回调中创建您的标记。

当 maCarte 仍处于未定义状态时，您也使用过它。因此，您只需在创建 map (maCarte) 后将其添加到 map (maCarte):

    var maCarte;
    var marqueur

function initMap() {

    var optionsCarte = {
        center: {lat: 43.4810896, lng: -1.540436},
        zoom: 16
    }

    maCarte = new google.maps.Map(document.getElementById("map"),optionsCarte);

    // Création d'un marqueur sur la carte : Ne fonctionne pas
    var optionsMarqueur = {
        position: {lat: 43.4810896, lng: -1.540436}, 
        map: maCarte
    };

    marqueur = new google.maps.Marker(optionsMarqueur); 
}

然后，无论您在 Google map 脚本标记之前还是之后包含 test.js 都没有关系。

关于javascript - 如何解析 "Uncaught ReferenceError: google is not defined"？ (谷歌地图 API)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37140901/

24 4 0
文章推荐： html - CSS 使用媒体查询更改位置
文章推荐： ios - 使用按钮将日期增加 2 周
文章推荐： javascript - ES6 - 构造函数中需要 Super
文章推荐： html - 元素的高度相等并与底部对齐
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com