谷歌地图指令调整大小事件抛出

Question

当我显示/隐藏谷歌地图时，它只在左上角显示为一个小框。我看过其他解决方案，他们说要放一个

        google.maps.event.addListenerOnce(map, "idle", function() {
            google.maps.event.trigger(map, "resize");
        });

函数到我的地图上，所以当我显示它时，会触发调整大小事件。

当我加载我的网页时，我收到以下错误：

TypeError: Cannot read property '__e3_' of undefined
    at $e (https://maps.gstatic.com/maps-api-v3/api/js/20/10/main.js:17:1614)
    at new Ye (https://maps.gstatic.com/maps-api-v3/api/js/20/10/main.js:20:321)
    at Object.S.addListener (https://maps.gstatic.com/maps-api-v3/api/js/20/10/main.js:17:1332)
    at Object.S.addListenerOnce (https://maps.gstatic.com/maps-api-v3/api/js/20/10/main.js:19:321)
    at linkFunction (http://localhost:3000/ffprototype.js?30b6906416281b1680ca5206c9cc5612b1a78d83:47:23)
    at invokeLinkFn (http://localhost:3000/packages/angular_angular.js?9db7e8edebe9ba02ab378f03d9a52d49148583ee:8288:9)
    at nodeLinkFn (http://localhost:3000/packages/angular_angular.js?9db7e8edebe9ba02ab378f03d9a52d49148583ee:7798:11)
    at compositeLinkFn (http://localhost:3000/packages/angular_angular.js?9db7e8edebe9ba02ab378f03d9a52d49148583ee:7147:13)
    at nodeLinkFn (http://localhost:3000/packages/angular_angular.js?9db7e8edebe9ba02ab378f03d9a52d49148583ee:7793:24)
    at compositeLinkFn (http://localhost:3000/packages/angular_angular.js?9db7e8edebe9ba02ab378f03d9a52d49148583ee:7147:13)

我的指令如下：

app.directive('addressBasedGoogleMap', function() {
    var map
    var linkFunction = function(scope, element, attrs) {
        var googleAddress = scope.$eval(attrs.address);
        var geocoder = new google.maps.Geocoder(); 
        geocoder.geocode({ 'address': googleAddress}, function (results, status){ 
            if (status == google.maps.GeocoderStatus.OK) { 
                var mapOptions = { zoom: 16, center:results[0].geometry.location, mapTypeId:google.maps.MapTypeId.ROADMAP}
                map = new google.maps.Map(element[0], mapOptions); 
                var marker1 = new google.maps.Marker({
                       position: results[0].geometry.location,
                       map: map,
                       title: googleAddress
                     });
            }
            else{
                alert(status)
            }
        })
    };
    google.maps.event.addDomListener(window, "resize", function() {
        var center = map.getCenter();
        google.maps.event.trigger(map, "resize");
        map.setCenter(center);
    });
    google.maps.event.addListenerOnce(map, "idle", function() {
        google.maps.event.trigger(map, "resize");
    });
    return {
        link: linkFunction
    };
});

我也尝试在链接函数中移动事件侦听器，但这也不起作用。

Answer 1

您似乎在定义 map 之前尝试使用它。地理编码器不会立即发生，因此当您的 addListenerOnce 触发时，map 尚未定义。

你也许可以这样重组：

app.directive('addressBasedGoogleMap', function() {
    var map
    var linkFunction = function(scope, element, attrs) {
        var googleAddress = scope.$eval(attrs.address);
        var geocoder = new google.maps.Geocoder(); 
        geocoder.geocode({ 'address': googleAddress}, function (results, status){ 
            if (status == google.maps.GeocoderStatus.OK) { 
                var mapOptions = { zoom: 16, center:results[0].geometry.location, mapTypeId:google.maps.MapTypeId.ROADMAP}
                map = new google.maps.Map(element[0], mapOptions); 
                var marker1 = new google.maps.Marker({
                   position: results[0].geometry.location,
                   map: map,
                   title: googleAddress
                });
                google.maps.event.addListenerOnce(map, "idle", function() {
                    google.maps.event.trigger(map, "resize");
                });
            } else {
                alert(status)
            }
        })
    };
    google.maps.event.addDomListener(window, "resize", function() {
        var center = map.getCenter();
        google.maps.event.trigger(map, "resize");
        map.setCenter(center);
    });
    return {
        link: linkFunction
    };
});

这样，一旦您知道在地理编码器返回后正确定义了地图，您就可以设置侦听器。