Question

我在使用AJAX加载的页面初始化谷歌地图时遇到了一些麻烦。

实时测试页（在开发中）： http://dma.nz/practice/

地图靠近页面底部。

目前它可以工作 - 地图在直接加载页面或通过AJAX加载时初始化，但它在控制台中给出了以下错误：

未捕获的TypeError：无法读取null的“firstChild”属性

在我的页脚中，我有：

<script src="/js/map.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBpC5JE9ZmQduEXiGbiNxZsws8OLMiC-Bw&callback=initMap" async defer></script>
<script src="/js/init.js"></script>

map.js包含：

function initMap() {

  var mapOptions = {
      zoom: 17,
      center: new google.maps.LatLng(-36.85855, 174.754944), 
      disableDefaultUI: true,
      styles: [
        {"featureType":"administrative",
        "elementType":"labels.text.fill",
        "stylers":[{"gamma":"0.00"},{"weight":"0.01"},{"visibility":"off"}]
        },
        {"featureType":"landscape",
        "elementType":"all",
        "stylers":[{"color":"#ffffff"}]
        },
        {"featureType":"landscape.natural",
        "elementType":"geometry",
        "stylers":[{"visibility":"on"}]
        },
        {"featureType":"landscape.natural.terrain",
        "elementType":"geometry.stroke",
        "stylers":[{"visibility":"on"}]
        },
        {"featureType":"poi",
        "elementType":"all",
        "stylers":[{"visibility":"off"}]
        },
        {"featureType":"road",
        "elementType":"all",
        "stylers":[{"saturation":"-100"},{"lightness":"32"},{"visibility":"on"}]
        },
        {"featureType":"road",
        "elementType":"labels.text",
        "stylers":[{"visibility":"off"}]
        },
        {"featureType":"road.highway",
        "elementType":"all",
        "stylers":[{"visibility":"simplified"}]
        },
        {"featureType":"road.highway",
        "elementType":"geometry",
        "stylers":[{"visibility":"on"},{"lightness":"63"}]
        },
        {"featureType":"road.highway",
        "elementType":"labels.text",
        "stylers":[{"visibility":"off"}]
        },
        {"featureType":"road.highway",
        "elementType":"labels.icon",
        "stylers":[{"visibility":"off"}]
        },
        {"featureType":"road.arterial",
        "elementType":"labels.icon",
        "stylers":[{"visibility":"off"}]
        },
        {"featureType":"transit",
        "elementType":"all",
        "stylers":[{"visibility":"off"}]
        },
        {"featureType":"transit.station",
        "elementType":"all",
        "stylers":[{"visibility":"off"}]
        },
        {"featureType":"water",
        "elementType":"all",
        "stylers":[{"visibility":"on"},{"color":"#eeeeee"}]
        }
      ]
  };

  // Get the HTML DOM element that will contain your map 
  var mapElement = document.getElementById('google-map');

  // Create the Google Map using our element and options defined above
  var map = new google.maps.Map(mapElement, mapOptions);

  // Add marker
  var marker = new google.maps.Marker({
    icon: '/img/icons/map-pin.svg',
    position: new google.maps.LatLng(-36.858749, 174.754944),
    map: map,
    title: 'DMA'
  });
}

然后是init.js的相关部分

ajaxLoad = function(html) {
    init();
    // init google map
    initMap();
    // change html title
    var HTMLtitle = $(".content > section:first-of-type").attr("data-title");
    $(document).prop('title', HTMLtitle);
    document.title = HTMLtitle;
    // Used for popState event (back/forward browser buttons)
    changedPage = true;   }

如果直接加载页面，我的google maps API脚本调用上的回调似乎可以正确初始化地图。如果页面由AJAX加载但不起作用，那么我在那里添加了 initMap（）; 行，以便在通过AJAX加载新内容后加载地图。

这是有效的，但抛出一个错误，我担心这个错误导致我的页面上的其他脚本无法正常工作。

关于如何修改这个以使地图初始化的任何想法，无论页面是直接加载还是通过AJAX加载，并且不会创建任何JS错误？谢谢！

Answer 1

当我从http://dma.nz/practice/页面切换到http://dma.nz/projects/页面时，我重现了错误。

我可以看到你尝试在map.js的第82行初始化地图实例。这里的问题是缺少id为“google-map”的元素。加载项目页面时，您没有任何ID为“google-map”的DOM元素。所以你试着在map构造函数中传递null。

要避免此错误，请添加检查ID为“google-map”的DOM元素。

// Get the HTML DOM element that will contain your map 
var mapElement = document.getElementById('google-map');

if (mapElement) {
    // Create the Google Map using our element and options defined above
    var map = new google.maps.Map(mapElement, mapOptions);

    // Add marker
    var marker = new google.maps.Marker({
        icon: '/img/icons/map-pin.svg',
        position: new google.maps.LatLng(-36.858749, 174.754944),
        map: map,
        title: 'DMA'
    });  
}

由AJAX加载的页面上的Google地图 - 如何初始化？

1 个答案: