2017-12-18 7 views
0

I ng Karte verwenden und ui für die Hälfte des Bildschirms Geting aber nicht in voller div Geting enter image description here ng-Karte zeigt Teil-Karte in ui

var app = angular.module('app', ['ngMap']); 
 

 
app.controller('ctrl', ['$scope', 'ngMap','$timeout', function($scope, ngMap,$timeout) { 
 
    NgMap.getMap().then(function(map) { 
 
    var center = map.getCenter(); 
 
    google.maps.event.trigger(map, "resize"); 
 
    map.setCenter(center); 
 
    }); 
 
    $timeout(function() { 
 
    NgMap.getMap().then(function(map) { 
 
     google.maps.event.trigger(map, 'resize'); 
 
    }); 
 
    }, 500); 
 
}]);
#ng-map { 
 
    width: 100% !important; 
 
    height: 100% !important; 
 
    position: absolute !important; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app="app" ng-controller="ctrl"> 
 
    <div map-lazy-load="https://maps.google.com/maps/api/js" id="ng-map" map-lazy-load-params="https://maps.google.com/maps/api/js?key=AIzaSyB4qnR0XX1tetbLUxSSLVWKi_E4WzGi1tk"> 
 
    <ng-map zoom="4"> 
 

 
    </ng-map> 
 
    </div> 
 
</div>

ich weiß nicht, warum ich geting bin Dieser Fehler. Bitte helfen Sie mir

Antwort

1

Das erste, was ich glaube, dass Sie es auf falsches Element setzen Sie müssen es auf Element innerhalb Ihrer # ng-Karte div versuchen, ändern Sie CSS zu (auch nicht zu verwenden! wichtig):

#ng-map ng-map{ 
    width: 100%; 
    height: 100%; 
    position: absolute; 
} 

Danach können Sie versuchen, up Einstellung:

default-style="false" 

auf Ihrer ng-Karte-Richtlinie auch mit Inline-Styles versuchen, hier Beispiel:

<ng-map zoom="4" default-style="false"> 
</ng-map> 

Und Plunker: http://plnkr.co/edit/Qh2O0W?p=preview

+0

Danke für Ihre Hilfe. als ich **! wichtig ** in CSS hinzugefügt habe, wurde der Fehler behoben –

Verwandte Themen