2017-05-29 5 views
1

Google Maps APIを使用するためのNgMapディレクティブに精通している人はいますか?データポイント上のマーカーでレンダリングするマップを取得しましたが、マーカーをクリックするとズームインしたいと考えています。これは私のために働いていません。私はマーカーの渡された位置をログに記録しようとしています。今は何も見ていません。 私はAngularJSにはかなり新しいので、おそらくスコープで何か不足しています。ありがとう!NgMap AngularJS setZoom()

<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> 

およびコンポーネント:

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); 
    } 

}

答えて

0

移動ng-repeat指令に、コントローラの機能を結合することonClickを使用

ここマップです。

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

はサンプルhereを参照してください。

関連する問題