Question

当我尝试在多个视图中显示两个地图时，我遇到了问题。我希望你能帮助我。

我有这个HTML代码：

         <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
            <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
            <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script><!-- load angular -->

        ........

        <div class="tab-content">
                <!-- HOME PAGE -->
                <div id="pois" class="tab-pane fade in active">
                    <div class="panel-body">
                        <div class="row">
                            <div class="col-md-8">
                                <div >
                                    <!-- MAPA -->
                                    <div class="embed-responsive embed-responsive-4by3 embed-responsive-item" style="margin-bottom: 10px;
                                    min-width: 323px; min-height: 323px" id="map_canvas"></div>
                                </div>
                            </div>

    ........

    <!-- SEARCH TAB -->
    <div class="panel-body">
           <div class="col-sm-6">
            <form class="form" role="form">
                 <div class="form-group">
                    <input type="text" class="form-control" placeholder="Direccion" ng-model="address"/>
                                                    <div class="well">
                                                        <b>Latitud: {{latitud}}</b><br>
                                                        <b>Logitud: {{longitud}}</b>
                                                    </div>
                                                </div>
                                                <button ng-click="sacarDir(address)" type="submit" class="btn btn-primary btn-block">Buscar</button><br>
                                            </form>
                                            <!-- MAPA -->
                                            <div class="embed-responsive embed-responsive-4by3 embed-responsive-item" style="margin-bottom: 10px;
                                             min-width: 323px; min-height: 323px" id="map_canvas2"></div>
                                        </div>

.................    

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

CONTROLLER JS：

angular.module('userManager',[],function($locationProvider){
    $locationProvider.html5Mode(true);
});

var map;
var map2;

.................

function initMap() {
    map = new google.maps.Map(document.getElementById('map_canvas'), {
        center: {lat: 40.46366700000001, lng: -3.7492200000000366},
        zoom: 6
    });

    map2 = new google.maps.Map(document.getElementById('map_canvas2'), {
        center: {lat: 40.46366700000001, lng: -3.7492200000000366},
        zoom: 6
    });

    $.get('/pois', function(res){
        var message=res.message;
        if(!res.error){
            for(i=0;i<message.length;i++){
                var marker = new google.maps.Marker({
                    position: {lat: message[i].latitud, lng: message[i].longitud},
                    map: map,
                    animation: google.maps.Animation.DROP,
                    title: message[i].nombre
                });
                // Push marker to markers array
                markers.push(marker);
            }
        }
    });
    setMarkers(markers);
}

问题在于第一张地图（map_canvas）工作正常，但当我更改为搜索标签时，地图不会显示，只有灰色方块。然后，如果我调整浏览器窗口的大小，我可以看到地图（map_canvas2），但另一个地图（map_canvas）停止工作。我该怎么办？

谢谢！

如何每页显示多个谷歌地图

0 个答案: