Question

我想在每个div id =“googleMap”中创建多个谷歌地图对象，问题是只有在第一轮旋转我获取谷歌地图对象和我的ng-repeat的其余轮换我得到空白div（让我们说没有谷歌地图对象里面的红色背景。

<div ng-repeat="gym in gyms track by $index ">

    <div id="gymContainer">

        <div id="googleMap"></div>

        <div class="form-group gymDes">
            Gym Name
            <input ng-model="gym.name" type="text" class="form-control" readonly>
        </div>

        <div class="form-group gymDes">
            City
            <input ng-model="gym.city" type="text" class="form-control" readonly>
        </div>

        <div class="form-group gymDes">
            Price
            <input ng-model="gym.price" type="text" class="form-control" readonly>
        </div>

        <div id="gymLogo"></div>

        <script>
            function initMap() {
                var mapDiv = document.getElementById('googleMap');
                var map = new google.maps.Map(mapDiv, {
                    center: {lat: 44.540, lng: -78.546},
                    zoom: 8
                });
            }
        </script>

        <script src="https://maps.googleapis.com/maps/api/js?callback=initMap"
                async defer></script>

    </div>
</div>

Answer 1

ng-repeat将重复其中指定的HTML，因此，它将创建几个具有相同id的div。但是，页面中ID的名称必须是唯一的。

因此，我建议在每次迭代时使这些ID发生变化。

Answer 2

您必须使用id属性替换class属性（在页面中应该是唯一的）。然后使用getElementsByClassName初始化您的地图：

为了您的信息，您必须每次迭代生成一个唯一的id / class，例如<div class="map_container-{{$index}}">，并找到一种方法来生成您要传递的自定义初始化javascript函数谷歌地图回调（这种方式不是实现你想要的正确和有角度的方式）：

<div ng-repeat="gym in gyms track by $index ">
    <div class="gymContainer">
        <div class="map_container-{{$index}}"></div>
        <!-- ... -->
        <script>
            function initMap() {
                var mapDiv = document.getElementsByClassName('YOUR_map_container-with-index');
                var map = new google.maps.Map(mapDiv, {
                    center: {lat: 44.540, lng: -78.546},
                    zoom: 8
                });
            }
        </script>
    </div>
</div>

Angular方式是创建自定义指令，或者您应该考虑使用Angular Google Maps

使用ng-repeat（angularJs）创建多个google.maps.Map对象

2 个答案: