动态添加第二个Google Map后无法正确呈现

JMK 发表于 Dev

JMK

将以下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 Maps问题，Angular问题还是Bootstrap问题的Angular指令，所以我使用这三个模型创建了这个模型，并尽可能地模仿了我的实际代码。

任何人都可以对这里发生的事情有所了解吗？

谢谢

JMK

好的，事实证明Google Maps无法处理非活动选项卡上的呈现，因此我需要创建选项卡并将其设置为活动状态，然后再呈现地图。

我变了：

$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;

将Angular设置为true时，似乎足以将其他选项卡的active属性设置为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>