Angular Google Maps zeigt nichts

Von dem, was ich erfahre, ist der folgende Code das Minimum, um Angular Google Maps zu starten, aber es zeigt die Karte nicht auf dem Bildschirm. Wenn ich # my-map-Komponente in Chrome anschaue, wird 0x0px angezeigt, und ich konnte dies trotz der Deklarationen von css und dynamischer Höhe nicht ändern. Abgesehen davon scheint es gut zu laufen, es gibt keine Konsolenfehler und das appMaps-Modul ist zumindest korrekt initialisiert.Angular Google Maps zeigt nichts

<!DOCTYPE html> 
html> 
    <head> 
    <title>New Map</title> 
    <style> 
     html, body { 
     height: 2000px; 
     width: 100%; 
     margin: 0; 
     padding: 0; 
     } 
     .angular-google-map-container { height: 400px; } 
    </style> 

    <script src="lodash/lodash.js"></script> 
    <script src="angular/angular.js"></script> 
    <script src="angular-google-maps/dist/angular-google-maps.js"></script> 
    <script> 
     var appMaps = angular.module('appMaps', ['uiGmapgoogle-maps']); 

     appMaps.config(function(uiGmapGoogleMapApiProvider) { 
     uiGmapGoogleMapApiProvider.configure({ 
     key: 'My Key Is Entered Here', 
     v: '3.20', 
     libraries: 'weather,geometry,visualization' 
     }); 
     }); 

     appMaps.controller('mainCtrl', function($scope) { 
     $scope.map = { center: { latitude: 45, longitude: -73 }, zoom: 8 }; 
     $scope.$on('$viewContentLoaded', function() { 
       var mapHeight = 400; // or any other calculated value 
       $("#my-map .angular-google-map-container").height(mapHeight); 
      }); 
     }); 
    </script> 
    </head> 
    <body> 
    <h1>TEST</h1> 
    <div id="map_canvas" ng-controller="mainCtrl"> 
     <ui-gmap-google-map id="my-map" center="map.center" zoom="map.zoom"></ui-gmap-google-map> 
    </div> 
    </body> 
</html>

Edit: Ja, so Roux korrekt war, hinzugefügt, um den Google Maps API-Skript (mit Schlüsseln) an der Spitze und Winkel-simple-Logger nach Winkel und leitet ich ziemlich nahe. Dann musste ich einfach ng-app = "appMaps" zum body-Element hinzufügen (im Allgemeinen bin ich neu zu eckig) und es hat funktioniert. Vielen Dank!

Quelle

2017-01-05 Nathan Williams

Sie müssen auch angular-simple-logger.js installieren und verweisen Sie es in der Kopfzeile, diese Bibliothek ist obligatorisch. (Ich denke jedoch, wenn es das Problem wäre, hätten Sie einen Konsolenfehler). Sie haben auch das '<' im HTML-Tag verpasst (oder es ist nur die Kopie einfügen) – Roux

Indem Sie der Quickstart folgen, können Sie sehen, dass Sie verpasst haben, ein paar Bibliothek/API aufzurufen.

Fügen Sie die Winkel-simple-logger.js in Ihrem Projekt (ich glaube, es kommt mit Winkel-ui-Pakete oder Winkel-google-maps)
Vergessen Sie nicht, die Google api hinzufügen, ohne es nichts wird funktionieren. <script src='//maps.googleapis.com/maps/api/js?sensor=false'></script>

Quelle

2017-01-05 09:03:32 Roux

Angular Google Maps zeigt nichts

Antwort

Verwandte Themen