"ng-map"の地図から既存のマーカーを取得する方法

Question

私はhttps://github.com/allenhwkim/angularjs-google-mapsを使用しています。 ng-repeatで作成されたすべてのマーカーを取得する方法。作成したマーカーにアクセスするために、mapインスタンス内に関数がありますか？私はこのコードを持っています：

<ng-map center="{{vm.searchParameters['hotel_city']}}" zoom="12" ng-if="vm.showMap" class="fx-fade-normal fx-dur-483 fx-ease-sine"> 
     <marker ng-repeat="hotel in vm.listHotelsFiltered" 
       position="{{[hotel.position.latitude/100000, hotel.position.longitude/100000]}}" 
       data="{{hotel}}" 
       on-click="vm.markerMapHotelDetail()" 
       title="{{hotel.hotel_name}}"> 
     </marker>    
</ng-map> 

多分このような何か？

NgMap.getMap().then(function(map) { //Create the instance of map 
     vm.map = map; 
     var markers = vm.map.getMarkers(); //? 
}); 

Answer 1

コントローラーのデータセットをループし、その時に境界を設定することをお勧めします。これを行うには、google maps apiの 'extend'関数を使用します。

データセットによっては、コントローラのようなものになります：NgMap

のためにあなたのワーカークラスに続いて

vm.positions = []; 
$scope.po = [$scope.userSearchedLocation[0].dlat,$scope.userSearchedLocation[0].dlon]; 

    //used for setting bounds of google map display 
    var bounds = new google.maps.LatLngBounds(); 

    //get lat and long of location searched for setting initial marker 
    var latlng = new google.maps.LatLng($scope.userSearchedLocation[0].dlat, $scope.userSearchedLocation[0].dlon); 

    //used for centering map view 
    bounds.extend(latlng); 
     for (var i = 0; i < data.length; i++) { 
    //add data to array for ng-repeat when placing markers on map 
     vm.positions.push({ 
      position: [data[i].dlat, data[i].dlon], 
      HotelName: data[i].HotelName, 
      }); 
     var latlng = new google.maps.LatLng(data[i].dlat, data[i].dlon); 
     bounds.extend(latlng);//used for centering map view around bounds 
     } 

を

NgMap.getMap().then(function(map) { //Create the instance of map 
     vm.map = map; 
     map.setCenter(bounds.getCenter()); 
     map.fitBounds(bounds); 
     map.setZoom(4); 
}); 

ビューが

<marker ng-repeat="p in vm.positions" 
    position="{{p.position}}" 
    title="{{p.HotelName}}" id="{{p.id}}"> 
</marker> 

Answer 2

ようなものになるだろう私はすでに私が探していたものを見つけました。vm.map.markersを使って作成したすべてのマーカーを取得できますng-repeat。

ビュー

<h4 class="text-right"> 
    <span ng-click="vm.loadMap()" class="label label-success">Map</span> 
</h4> 

<ng-map zoom="12" ng-if="vm.showMap" class="fade-element-in"> 
     <marker ng-repeat="hotel in vm.listHotelsFiltered" 
       position="{{[hotel.position.latitude/100000, hotel.position.longitude/100000]}}" 
       data="{{hotel}}" 
       on-click="vm.markerMapHotelDetails()" 
       title="{{hotel.hotel_name}}"> 
     </marker> 
</ng-map> 

コントローラ

vm.loadMap = function() { 
    vm.showMap = !vm.showMap; 

    if (_.size(vm.map) == 0) { 
     NgMap.getMap().then(function (map) { 
      vm.map = map; 
      vm.setMapBounds(); 
      }); 
     } 

    vm.showMap && _.size(vm.map) > 0 ? vm.setMapBounds() : null; 
}; 

vm.setMapBounds = function() { 
    $timeout(function() { 
     if(vm.listHotelsFiltered.length){ 
      vm.bounds = new google.maps.LatLngBounds(); 
      _.forEach(vm.map.markers, function (marker) { 
       vm.bounds.extend(marker.getPosition()); 
      }); 
      vm.map.fitBounds(vm.bounds); 
     }else{ 
      NgMap.getGeoLocation(vm.searchParameters['hotel_city']).then(function (latlng) { 
       vm.map.setCenter(latlng); 
      }); 
     } 
    }); 
};