wake-up-neo.com

Google maps for AngularJS

Ich bin sehr neu bei AngularJS und versuche, https://github.com/angular-ui/angular-google-maps zu verwenden.

Ich versuche nur, die Karte auf meiner Seite zu rendern, aber ich erhalte eine Fehlermeldung und weiß nicht, was sie bedeutet. Jede Hilfe zum Verständnis dieser Fehlermeldung wäre willkommen.

Ich habe hier einen Plunk erstellt:

github.com/twdean/plunk

Hier ist der Fehler im Browser:

Error: [$compile:multidir] Multiple directives [googleMap, markers] asking for new/isolated scope on: <google-map center="center" draggable="true" zoom="zoom" markers="markers" mark-click="true" style="height: 400px"> 

http://errors.angularjs.org/1.2.3/$compile/multidir?p0=googleMap&p1=markers&p2=new%2Fisolated%20scope&p3=%3Cgoogle-map%20center%3D%22center%22%20draggable%3D%22true%22%20zoom%3D%2
29
tdean

Ich schlage eine andere Alternative vor, ng-map.

Ich habe eine google maps angularjs Directive namens ng-map für mein eigenes Projekt erstellt. Dies erfordert keine Javascript-Codierung für einfache Funktionalität.

Um loszulegen

Ein. Download und ng-map.js oder ng-map.min.js einbinden

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="dist/ng-map.min.js"></script>`

Zwei. Verwenden Sie das Tag map und optional die Tags control, marker und shape

<ng-map zoom="11" center="[40.74, -74.18]">
  <marker position="[40.74, -74.18]" />
  <shape name="circle" radius="400" center="[40.74,-74.18]" radius="4000" />
  <control name="overviewMap" opened="true" />
</ng-map>`  

Beispiele

Um es in Ihrer App zu verwenden, fügen Sie einfach 'ngMap' als Abhängigkeit zu Ihrer App hinzu.

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

Ich hoffe es hilft

-------------- EDIT -------------------

Für diejenigen, die Angular2-Version sucht,
gibt es auch ng2-maphttps://ng2-ui.github.io/#/google-map

72
allenhwkim

Es scheint, dass Sie ein "Marker" -Attribut in Ihr google-map -Element aufnehmen. 

Wie @Tyler Eich erwähnt, bleiben die Dokumente vom 5. Dezember 2013 veraltet. Wenn Sie das Marker-Attribut entfernen, scheint es zu funktionieren.

So zeigen Sie Markierungen an:

index.html

<div ng-controller="MapCtrl">
    <google-map id="mymap" 
            center="center" 
            zoom="zoom" 
            draggable="true"                                    
            mark-click="false">
            <markers>
                <marker ng-repeat="marker in markers" coords="marker">
                </marker>
            </markers>
    </google-map>
</div>

controller.js

var controller = module.controller('MapCtrl', function($scope) {
  $scope.myMarkers = [
      {
         "latitude":33.22,
         "longitude":35.33
      },
      ...
  ];

  $scope.center = {
      latitude: 33.895497,
      longitude: 35.480347,
  };

  $scope.zoom = 13;
  $scope.markers = $scope.myMarkers;
  $scope.fit = true;
});
8
Nicholas Credli

Ich hatte gerade heute die Notwendigkeit, eine Google-Karte in meine Winkelanwendung zu implementieren. Da meine Implementierung etwas recht einfaches erfordert hatte, entschied ich mich, dies selbst zu tun und eine einfache Direktive zu erstellen. Ich werde meine Quelle für jeden, der es nützlich finden könnte, hier unten lassen.

  1. Erstellen Sie eine Direktive
  2. Erstellen Sie HTML
  3. Übergeben Sie optional die Koordinaten durch die Direktive/den Controller, falls erforderlich.

DIREKTIVE

angular.module('ngPortalApp')
  .directive('googleMap', function () {
    return {
      template: '<iframe width="100%" height="350" frameborder="0" style="border:0"></iframe>',
      restrict: 'E',
      scope: {
        pbcode: '='
      },
      link: function postLink(scope, element) {
        var mapFrame = element.find("iframe");
          if (scope.pbcode) {
            mapFrame.attr('src', "https://www.google.com/maps/embed?pb=" + scope.pbcode);
          }
          else {
            mapFrame.attr('src', '');
          }
      }
    };
  });

HTML

<div class="col-lg-12">
<google-map pbcode="'!1m0!3m2!1sen!2srs!4v1445332712674!6m8!1m7!1s34JkuBgIzmIJNmpFNThuUg!2m2!1d40.75816449978445!2d-73.98911289129973!3f175.51693470959802!4f7.069842517148402!5f0.7820865974627469'"></google-map>
</div>

Das ist alles dazu. Denken Sie daran, dass die Google-Abfragezeichenfolge "pb" genannt wird. Dies ist der Code, der in allen Einbettungscodes verwendet wird, die Sie von Google abrufen können. Sie können dies direkt an Ihre Direktive weiterleiten oder wenn Sie dies über Ihren Controller oder sogar über die Direktive selbst benötigen. Sie können in der Direktive innerhalb der Vorlage beliebige iframe-Map-Einstellungen festlegen.

Um zwischen Street View oder Map View zu wechseln, senden Sie einfach den entsprechenden Code, von der Quelle, von der Sie sie erhalten (db, json usw.).

Für das obige Beispiel:

Straßencode:

! 1M0! 3m2! 1sen! 2srs! 4v1445332712674! 6M8! 1M7! 1s34JkuBgIzmIJNmpFNThuUg! 2m2! 1d40.75816449978445! 2d-73,98911289129973! 3f175.51693470959802! 4f7.069842517148402! 5f0.7820865974627469

Kartencode:

! 1m18! 1M12! 1m3! 1d755.5452773113641! 2d-73,98946157079955! 3d40.75804119870795! 2m3! 1F0! 2f0! 3f0! 3m2! 1i1024! 2i768! 4f13.1! 3m3! 1m2! 1s0x0000000000000000% 3A0x1952a6258d36ecc5! 2sMcDonald ist! 5e0! 3m2! 1sen! 2srs! 4v1445332854795

Hatte bisher noch keine Probleme ... Hier ist eine Geige: jsFiddle

4
geostima

Für Angular2 gibt es angle2-google-maps . Lizenz Stand vom 14.05.2016: MIT.

0
koppor

Wenn Sie Markierungen einfügen möchten, sollten Sie dies in einem anderen Element in der google-maps-Direktive ..__ tun. Sie sollten Folgendes tun:

<google-maps options="someOptionsObject"> 
<markers cords="someArrayWithLatitudeAndLongitudeCords"></markers>    
</google-maps>
0
PandAngular