ng-mapa pokazuje mapę częściowe w HTML

Question

używam NG-mapę angularjs Z jakiegoś powodu mój obraz mapa jest nieaktywna przez 90% całej mapie, tak jak poniżej:

Moje HTML dość prosta:

<div id="map"> 
<map></map> 
</div> 

mam nawet próbował dodać CSS tak:

<style> 
    #map{ 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    } 
</style> 

Oto mój kontroler:

$scope.$on('mapInitialized', function(event, map) { 
    $scope.map.setCenter(new google.maps.LatLng($scope.location.latitude, $scope.location.longitude)); 
    $scope.setZoom(4); 
} 

Dodałem skrypty do używania ngMap. Usunąłem również wszelkie blokady AdBlock, jeśli mogłoby to spowodować problem.

EDYCJA: google.maps.event.trigger (mapa, "zmień rozmiar"); działa

Answer 1

Po zainicjowaniu mapy zrobiono to w pojemniku bez wymiarów (szerokość 0 i/lub wysokość 0). Więc mapa nie wie, jaki rozmiar musi być.

Należy jawnie ustawić wymiary szerokości i wysokości na swoim elemencie przed zainicjalizowaniem mapy lub, w przypadku niepowodzenia, zadzwonić pod numer google.maps.event.trigger(map,'resize'); (gdzie map jest instancją mapy google), jeśli mapa została zainicjalizowana na ukrytym elemencie (nie szerokość/wysokość), który staje się widoczny.

UWAGA:

Ustawianie #map być height:100% nie ma żadnego wpływu, chyba że elementem dominującym #map „s ma wyraźny wzrost. Śmiało, ustaw #map na height: 300px, a zobaczysz, że "działa" nagle.

Jeśli chcesz mapa być pełny ekran, wtedy trzeba ustawić wysokość html/body elementów:

html,body,#map { height: 100%; } 

Answer 2

Szukałem w kodzie źródłowym NG-Map, a znalazłem ten kawałek:

/** 
    * if style is not given to the map element, set display and height 
    */ 
    if (getStyle(element[0], 'display') != "block") { 
    element.css('display','block'); 
    } 
    if (getStyle(element[0], 'height').match(/^(0|auto)/)) { 
    element.css('height','300px'); 
    } 

Użyje atrybutu height (i ewentualnie width) na elemencie mapy. Więc easyest rozwiązanie problemu jest po prostu ustawić szerokość i wysokość na mapie:

<div id="map"> 
<map style="width:100%;height:100%;"></map> 
</div> 

EDIT: ng-map wezwie google.maps.event.trigger(map,'resize'); tuż po ustawieniu wysokość div, więc nie musieć.

/** 
    * resize the map to prevent showing partially, in case intialized too early 
    */ 
    $timeout(function() { 
     google.maps.event.trigger(map, "resize"); 
    }); 

Answer 3

miałem ten sam problem podczas nawigowania między 2 poglądów za pomocą UI-routera (każdy widok miał własną mapę). Naprawiłem problem przez ustawienie szerokości kontenera mapy na wysokość i na 100%, dodając id do NG-mapie w html i dodając następny kod do sterownika państwa:

NgMap.getMap({id: 'myMapId' }).then(function(map) { 
    google.maps.event.trigger(map, 'resize'); 
});