动态添加时第二个谷歌地图无法正确呈现答案

【问题标题】：2nd Google Map not rendering properly when added dynamically动态添加时第二个谷歌地图无法正确呈现
【发布时间】：2014-05-30 23:26:06
【问题描述】：

以下 HTML，当复制到 .html 文件并在浏览器中直接查看时，显示了我的问题。

<!DOCTYPE HTML>
<html ng-app="myApp">

<head>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular.min.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.min.js"> </script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"> </script>

<script>

    var mapOptions = {
        zoom: 5,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
    };

    var myApp = angular.module('myApp', ['ui.bootstrap']);

    var myController = function($scope){
        $scope.locations = [];

        $scope.addLocation = function(){
            var id = $scope.locations.length+1;

            $scope.locations.push({ id: id, city: $scope.newLocation.city, country: $scope.newLocation.country });

            $scope.newLocation = { city:'', country:'' };
        }

        $scope.$watch('locations', function(){

            for(var i = 0; i < $scope.locations.length; i++){
                var thisLocation = $scope.locations[i];

                if(!thisLocation.rendered){
                    var geocoder = new google.maps.Geocoder();

                    var id = thisLocation.id;
                    var address = thisLocation.city + ' ' + thisLocation.country;

                    geocoder.geocode({ 'address': address }, function (results, status) {
                        if (status == google.maps.GeocoderStatus.OK) {
                            var longitude = results[0].geometry.location.A;
                            var latitude = results[0].geometry.location.k;

                            var map = $scope.displayMap(latitude, longitude, 'Test' + id, id);
                            google.maps.event.trigger(map, "resize");
                        }
                    });

                    thisLocation.rendered = true;
                }


            }

        }, true);

        $scope.displayMap = function displayMap(latitude, longitude, name, id) {

            var mapDiv = document.getElementById('map' + id);
            if (mapDiv) mapDiv.style.display = "block";

            var mapCanvas = document.getElementById('map-canvas' + id);
            if (mapCanvas) mapCanvas.style.height = "400px";

            var map = new google.maps.Map(document.getElementById('map-canvas' + id), mapOptions);

            var locCoords = new google.maps.LatLng(latitude, longitude);

            map.setCenter(locCoords);

            new google.maps.Marker({
                position: locCoords,
                map: map,
                title: name
            });

            return map;
        }

        $scope.newLocation = { city:'', country:'' };
    }

    myController.$inject = ['$scope'];
    myApp.controller('myController', myController);
</script>

</head>

<body ng-controller="myController">

<form ng-submit="addLocation()">
    <label for="city"><input id="city" ng-model="newLocation.city" required /></label>
    <label for="country"><input id="country" ng-model="newLocation.country" required /></label>
    <input type="submit" value="Submit" />
</form>

<tabset>
    <tab ng-repeat="location in locations" heading="{{location.city}}">
        <div id="map{{location.id}}" class="map">
            <div id="map-canvas{{location.id}}" class="map-canvas">
                Map goes here
            </div>
        </div>
    </tab>
</tabset>

</body>

</html>

基本上，您只需填写一次表格即可将地图添加到选项卡集，它可以正常工作：

再次填写表格添加第二张地图，这是一场灾难：

Chrome 的开发者控制台中甚至没有任何迹象表明存在问题。

我无法确定这是 Google 地图问题、Angular 问题还是引导程序问题的 Angular 指令，所以我使用这三个问题创建了这个模型，并尽可能地模仿了我的实际代码。

有人能解释一下这里发生了什么吗？

谢谢

【问题讨论】：

我之前尝试在 jQuery 对话框中添加地图时看到过这种情况，但我没有深入了解它，我不知道这是否有助于您找到答案。

标签： javascript html angularjs google-maps angular-ui-bootstrap

【解决方案1】：

好吧，事实证明 Google 地图无法处理非活动选项卡上的呈现，所以我需要在呈现地图之前创建选项卡并将其设置为活动。

我变了：

$scope.locations.push({ id: id, city: $scope.newLocation.city, country: $scope.newLocation.country });

收件人：

$scope.locations.push({ id: id, city: $scope.newLocation.city, country: $scope.newLocation.country, active: true });

在我的 for 循环末尾添加以下内容：

thisLocation.active = true;

当您将其设置为 true 时，Angular 似乎足够聪明，可以将其他选项卡的活动属性设置为 false。

最后我将tab元素的active属性设置为模型的active属性：

<tab ng-repeat="location in locations" heading="{{location.city}}" active="location.active" >

一个工作示例如下：

<!DOCTYPE HTML>
<html ng-app="myApp">

<head>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular.min.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.min.js"> </script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"> </script>

<script>

    var mapOptions = {
        zoom: 5,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
    };

    var myApp = angular.module('myApp', ['ui.bootstrap']);

    var myController = function($scope){
        $scope.locations = [];

        $scope.addLocation = function(){
            var id = $scope.locations.length+1;

            $scope.locations.push({ id: id, city: $scope.newLocation.city, country: $scope.newLocation.country, active: true });

            $scope.newLocation = { city:'', country:'' };
        }

        $scope.$watch('locations', function(){

            for(var i = 0; i < $scope.locations.length; i++){
                var thisLocation = $scope.locations[i];

                if(!thisLocation.rendered){ 

                    var geocoder = new google.maps.Geocoder();

                    var id = thisLocation.id;
                    var address = thisLocation.city + ' ' + thisLocation.country;

                    geocoder.geocode({ 'address': address }, function (results, status) {
                        if (status == google.maps.GeocoderStatus.OK) {
                            var longitude = results[0].geometry.location.A;
                            var latitude = results[0].geometry.location.k;

                            var map = $scope.displayMap(latitude, longitude, 'Test' + id, id);
                            google.maps.event.trigger(map, "resize");
                        }
                    });

                    thisLocation.active = true;
                    thisLocation.rendered = true;
                }


            }

        }, true);

        $scope.displayMap = function displayMap(latitude, longitude, name, id) {

            var mapDiv = document.getElementById('map' + id);
            if (mapDiv) mapDiv.style.display = "block";

            var mapCanvas = document.getElementById('map-canvas' + id);
            if (mapCanvas) mapCanvas.style.height = "400px";

            var map = new google.maps.Map(document.getElementById('map-canvas' + id), mapOptions);

            var locCoords = new google.maps.LatLng(latitude, longitude);

            map.setCenter(locCoords);

            new google.maps.Marker({
                position: locCoords,
                map: map,
                title: name
            });

            google.maps.event.trigger(map, "resize");

            return map;
        }

        $scope.newLocation = { city:'', country:'' };
    }

    myController.$inject = ['$scope'];
    myApp.controller('myController', myController);
</script>

</head>

<body ng-controller="myController">

<form ng-submit="addLocation()">
    <label for="city"><input id="city" ng-model="newLocation.city" required /></label>
    <label for="country"><input id="country" ng-model="newLocation.country" required /></label>
    <input type="submit" value="Submit" />
</form>

<tabset>
    <tab ng-repeat="location in locations" heading="{{location.city}}" active="location.active" >
        <div id="map{{location.id}}" class="map">
            <div id="map-canvas{{location.id}}" class="map-canvas">
                Map goes here
            </div>
        </div>
    </tab>
</tabset>

</body>

</html>

【讨论】：

【解决方案2】：

尝试触发调整大小：

google.maps.event.trigger(map, "resize");

【讨论】：

这很好，但遗憾的是它不对，我已经更新了示例。