使用谷歌地图时作为未定义的第一个孩子出现错误

Posted 2023-03-28

【中文标题】使用谷歌地图时作为未定义的第一个孩子出现错误

【英文标题】：getting an error as first child of undefined when using google maps

【发布时间】：2017-07-13 11:36:45

【问题描述】：

使用以下代码多次使用谷歌地图时出错

var checkForMap = function() 
    $scope.post.showMap = true;
    var myLatlng = new google.maps.LatLng($scope.post.location.x, $scope.post.location.y);
    var myOptions = 
        zoom: 15,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    
    var mapHolder = $('.map_class')[$scope.$index];
    $scope.map = new google.maps.Map(mapHolder, myOptions);
    var infowindow = new google.maps.InfoWindow();
    var marker = new google.maps.Marker(
        map: $scope.map,
        position: myLatlng
    );
    google.maps.event.addListener(marker, 'click', function() 
        infowindow.setContent($scope.item.post.post.locationName);
        infowindow.open(map, this);
    );

if ($scope.post.locationName != null) 
    checkForMap();
 else 
    $scope.post.showMap = false;

多次使用谷歌地图。通过使用 $scope.$index 我可以显示确切的位置。

【问题讨论】：

在 $scope.map = new google.maps.Map(mapHolder, myOptions); 处出现错误

你遇到了什么错误？

@DeividasKaržinauskas 感谢 angular.js:14328 TypeError: Cannot read property 'firstChild' of undefined at Object._.Yf (maps.googleapis.com/maps/api/…) at new rg (maps.googleapis.com/maps/api/…)

我之前收到过这个错误。在我的情况下，原因是谷歌地图脚本试图在 DOM 完全加载之前加载。所以它试图将地图附加到一个尚不存在的元素。

@BFG 谢谢如何做到这一点

【参考方案1】：

Google Maps javascript API 提供了一种注册 event notifications 的方法，特别是在 html 页面完全加载后触发的 onload 事件。

为了确保地图在页面加载后被初始化，替换

checkForMap();

与

google.maps.event.addDomListener(window, 'load', checkForMap);  

【讨论】：

感谢@vadim Gremyachev。显示地图需要更多时间（10M）。页面加载后。