如何从 "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 映射 api.

的 'extend' 函数来执行此操作

根据您的数据集，控制器可能类似于：

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
      }

然后在你的 Worker class for NgMap

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

如何从 "ng-map" 中的地图获取现有标记

How to get existing markers froms the map in "ng-map"

google-maps

angularjs

ng-map