Was ist der richtige Weg, um das Google Maps-Objekt von AngularJs zu erhalten?

Volle Enthüllung: Ich bin wirklich neu zu JS und SUPER, die zu AngularJs neu sind. Mit diesem gesagt ...Was ist der richtige Weg, um das Google Maps-Objekt von AngularJs zu erhalten?

Ich versuche, eine Web-Anwendung, die AngularJs Route Provider-Funktionalität verwendet. Ich möchte, dass eine der templateURLs, die ich verwende, ein Google Map-Objekt enthält, dem ich Marker usw. dynamisch hinzufügen kann, wenn Daten von einem Backend-Server verfügbar werden.

Was ich habe Arbeits:

Multiple Vorlage URLs und korrekte Navigation zwischen ihnen (basierend auf dem großen Tutorial here gefunden
ich eine andere Vorlage URL hinzugefügt, die das ui-gmap-google-map Element enthält und in der Steuerung für. die Vorlage URL, habe ich einen Rückruf über uiGmapGoogleMapApi.then, dass (die Karte sichtbar ist) genannt wird

Was fehlt.

ich keinen Zugriff auf die zugrundeliegenden Google Maps bekommen kann das Objekt, wo soll ich Markierungen, Polylinien, etc. hinzufügen
ich die Dokumentation gelesen haben here, die eine control als Teil des HTML-Markup enthalten sagt (siehe meine map.html Datei unten) und sah this promising answer das scheint meine genaue Frage zu adressieren. Mein $scope.map.control Objekt wird jedoch nie ausgefüllt (weitere Informationen finden Sie weiter unten).

Mein Setup ist wie folgt:

webapp 
--css 
    --style.css // contains ".angular-google-map-container {height: 400px;}" 
--js 
    --angular-google-maps.min.js 
    --angular-simple-logger.js 
    --lodash.min.js 
--pages 
    --about.html // from tutorial 
    --contact.html // from tutorial 
    --home.html // from tutorial 
    --map.html // my map is in here (see below) 
--WEB-INF 
    --web.xml 
--index.html // modified from the tutorial (see below) 
--script.js // modified from the tutorial (see below)

Meine neue/geänderte Dateien sind wie folgt:

pages/map.html

<div> 
    <ui-gmap-google-map center='map.center' zoom='map.zoom' control='map.control'></ui-gmap-google-map> 
</div>

index.html (meist nur der Tutorialcode)

<!DOCTYPE html> 
<html ng-app="scotchApp"> 
<head> 
    <!-- SCROLLS --> 
    <!-- load bootstrap and fontawesome via CDN --> 
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" /> 
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" /> 
    <link rel="stylesheet" href="css/style.css"/> 

    <!-- SPELLS --> 
    <!-- load angular and angular route via CDN --> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-route.js"></script> 
    <script src="js/lodash.min.js"></script> 
    <script src="js/angular-google-maps.min.js"></script> 
    <script src="js/angular-simple-logger.js"></script> 
    <script src="script.js"></script> 
</head> 
<body> 

<!-- HEADER AND NAVBAR --> 
<header> 
    <nav class="navbar navbar-default"> 
     <div class="container"> 
      <div class="navbar-header"> 
       <a class="navbar-brand" href="/">Angular Routing Example</a> 
      </div> 

      <ul class="nav navbar-nav navbar-right"> 
       <li><a href="#"><i class="fa fa-home"></i> Home</a></li> 
       <li><a href="#about"><i class="fa fa-shield"></i> About</a></li> 
       <li><a href="#contact"><i class="fa fa-comment"></i> Contact</a></li> 
       <li><a href="#map"><i class="my_location"></i> Map</a></li> 
      </ul> 
     </div> 
    </nav> 
</header> 

<!-- MAIN CONTENT AND INJECTED VIEWS --> 
<div id="main"> 

    <!-- angular templating --> 
    <!-- this is where content will be injected --> 
    <!--{{ message }}--> 
    <div ng-view></div> 

</div> 

</body> 
</html>

Und schließlich script.js

// create the module and name it scotchApp 
var scotchApp = angular.module('scotchApp', ['ngRoute', 'uiGmapgoogle-maps']); 

scotchApp.config(function($routeProvider) { 
    $routeProvider   

     // ... 
     // Skipping unrelated routing code from the tutorial 
     // ... 

     // route for the map page (THIS IS NEW) 
     .when('/map', { 
      templateUrl : 'pages/map.html', 
      controller : 'mapController' 
     }); 
}).config(function (uiGmapGoogleMapApiProvider) { 
    uiGmapGoogleMapApiProvider.configure({ 
     key: '{KEY IS HERE}', 
     v: '3.20', 
     libraries: 'weather,geometry,visualization' 
    }); 
}); 

// ... 
// Skipping unrelated controller code from the tutorial 
// ... 

scotchApp.controller('mapController', function($scope, uiGmapGoogleMapApi) { 
    // Here is my empty "control" as specified by the documentation 
    $scope.map = { control: {}, center: { latitude: 45, longitude: -73 }, zoom: 8 }; 
    uiGmapGoogleMapApi.then(function(maps) { 
     console.log("Maps are ready"); 

     // Here $scope.map.control is still empty. What gives? 
     if ($scope) { 
      console.log("Scope is defined"); 
     } 
     else { 
      console.log("Scope is not defined"); 
     } 
    }); 
});

Also, was fehlt, um für mich, die Kontrolle zu bekommen, so dass ich dann $scope.map.control.getGMap(), um die Karte zu erhalten aufrufen können (pro der Dokumentation)?

Quelle

2016-05-11 curob

Es scheint, dass, wenn uiGmapGoogleMapApi Versprechen gelöst ist, es nicht bedeutet, dass die Karte bereit ist. Versuchen Sie uiGmapIsReady.promise() stattdessen (für weitere Informationen überprüfen Sie this SO answer). Arbeitscode:

scotchApp.controller('mapController', function($scope, uiGmapGoogleMapApi, uiGmapIsReady) { 
     // Here is my empty "control" as specified by the documentation 
     $scope.map = { control: {}, center: { latitude: 45, longitude: -73 }, zoom: 8 }; 

     uiGmapIsReady.promise().then(function(instances) { 
      console.log($scope.map.control.getGMap); //is set now 
     }); 
    });

Quelle

2016-05-11 17:53:59

Was ist der richtige Weg, um das Google Maps-Objekt von AngularJs zu erhalten?

Antwort

Verwandte Themen