2017-05-29 4 views
1

Kennt jemand NgMap-Richtlinien zur Verwendung der Google Maps-API? Ich habe eine Karte bekommen, die mit Markern auf Datenpunkten gerendert wurde, aber ich möchte hineinzoomen, wenn ich auf den Marker klicke. Das funktioniert nicht für mich. Ich versuche nur, den übergebenen Ort des Markers zu protokollieren und ich sehe gerade nichts. Ich bin ziemlich neu in AngularJS, also vermisse ich wahrscheinlich etwas mit dem Zielfernrohr. Vielen Dank!NgMap AngularJS setZoom()

Hier ist die Karte:

<div id='map'> 
<map center="{{ $ctrl.map.center.latitude }}, {{ $ctrl.map.center.longitude }}" zoom="{{ $ctrl.map.zoom }}"> 
    <div ng-repeat="location in $ctrl.locations"> 
    <marker position="[{{ location.latitude }}, {{ location.longitude }}]" ng-click="$ctrl.pinClicked(location)"></marker> 
    </div> 
</map> 
</div> 

Und die Komponente:

angular.module('myplaces') 
    .component('placespage', { 
    templateUrl: 'places.template.html', 
    controller: controller 
    }) 

    function controller(placeService, NgMap) { 
    const ctrl = this; 
    ctrl.locations = []; 
    ctrl.marker = [] 
    ctrl.map = {} 
    var map; 

    ctrl.$onInit = function() { 

     placeService.getPlaces().then(function(response) { 
     console.log(response.data.rows); 
     ctrl.locations = response.data.rows; 
     }) 

     NgMap.getMap().then(function(map) { 
     console.log(ctrl.map); 
     }) 

     ctrl.map = { 
     center: 
     { 
      latitude: 34.8394, 
      longitude: 134.6939 
     }, 
     zoom:5, 
     }; 

    } 

    ctrl.pinClicked = function(loc) { 
    console.log(loc); //This is getting nothing... 
    ctrl.map.setZoom(8); 
    } 

}

Antwort

0

bewegen ng-repeat zu Richtlinie und verwenden onClick mit Controller-Funktion zu binden.

<marker ng-repeat="location in $ctrl.locations" position="[{{ location.latitude }}, {{ location.longitude }}]" on-click="$ctrl.pinClicked(location)"></marker> 

siehe Probe here.

Verwandte Themen