Question

我知道很多人都面临这种错误，因为很多问题和与此类错误相关的答案

以下是我的动态页脚

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

custom.js看起来像

jQuery(document).ready(function($) {
    // Google Map
    function initMap(){
        var location = new google.maps.LatLng(40.712784, -74.005941);
        var myOptions = {
            zoom: 6,
            center: location,
            scrollwheel:false
        };
        var map = new google.maps.Map(document.getElementById("map"),
        myOptions);
        var marker = new google.maps.Marker({
            position: location,
            map: map
        });
        // alert("Google Working");
    };
    google.maps.event.addDomListener(window, "load", initMap);
});

仅为contact-us.html页

映射div

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

但地图显示＆amp;也显示如下错误

InvalidValueError: initMap is not a function

＆安培;没有contactus.html的所有页面在控制台上显示以下错误

TypeError: a is null
...ndChild(c)};_.ug=function(a){for(var b;b=a.firstChild;)_.tg(b),a.removeChild(b)}

我正在寻找最近两天＆amp;申请这个但没有任何有用的答案。

我需要销毁错误。

我的代码出了什么问题。

由于

现在正在编辑的基于编辑的答案

function initMap(){
 var divId = document.getElementById("map");
 if (!divId) {
    return;
 }

 var location = {lat: 40.712784, lng: -74.005941};
 var map = new google.maps.Map(divId,{
    zoom: 6,
    center: location,
    scrollwheel:false
 });
 var marker = new google.maps.Marker({
    position: location,
    map: map
 });
}

加载JS

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

Answer 1

您的函数initMap()的作用域是匿名函数，因此googlemaps无法看到此函数。您应该在没有jQuery(document).ready(function($) { ...

的情况下在全局范围内声明函数

function initMap(){
    var div = document.getElementById("map");
    if (!div) {
        return;
    }
    var location = new google.maps.LatLng(40.712784, -74.005941);
    var myOptions = {
        zoom: 6,
        center: location,
        scrollwheel:false
    };
    var map = new google.maps.Map(div,
    myOptions);
    var marker = new google.maps.Marker({
        position: location,
        map: map
    });
    // alert("Google Working");
};
window.onload = function() {
    if (google) {
        google.maps.event.addDomListener(window, "load", initMap);
    }
}

有关范围的更多信息：https://toddmotto.com/everything-you-wanted-to-know-about-javascript-scope/#what-is-local-scope

加载libs：

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

Answer 2

自定义js文件链接需要高于谷歌API链接，如下所示

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

编辑自定义js文件，请参阅下面的代码

 function initMap(){
  var location = {lat: 40.712784, lng: -74.005941};
  var map = new google.maps.Map(document.getElementById("map"),{
    zoom: 6,
    center: location,
    scrollwheel:false
  });
  var marker = new google.maps.Marker({
    position: location,
    map: map
  });
}

我希望能帮到你

由于

谷歌地图显示错误，但地图显示正确

2 个答案: