NgMap AngularJS setZoom()

Question

有人熟悉使用 Google Maps API 的 NgMap 指令吗？我已经获得了一张地图，可以在数据点上使用标记进行渲染，但是当我单击标记时我想放大。这对我不起作用。我只是想记录标记的传入位置，我现在什么也看不到。 我对 AngularJS 很陌生，所以我可能在范围内遗漏了一些东西。谢谢！

这是地图：

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

}

Answer 1

将ng-repeat 移动到marker 指令并使用onClick 绑定控制器的功能。

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

查看示例here。