NgMap AngularJS 设置缩放()

Question

是否有人熟悉使用 Google 映射 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。

NgMap AngularJS 设置缩放()

NgMap AngularJS setZoom()

angularjs

google-maps

google-maps-api-3

ng-map