Đặt giới hạn Google Maps với angular-google-maps

Question

Tôi đang cố gắng đặt giới hạn vào phiên bản Google Maps nhưng không thành công. Tôi đang sử dụng mô-đun AngularJS và angular-google-maps. thử cuối cùng của tôi là:

<div id="map_canvas"> 
    <ui-gmap-google-map 
     center="map.center" 
     zoom="map.zoom" 
     bounds="map.bounds" 
     options="options"> 

     <div ng-repeat="d in devicesMarkers track by d.id"> 

      <ui-gmap-marker 
       idkey="d.id" 
       coords="d.center" 
       options="d.options"> 
      </ui-gmap-marker> 
      <ui-gmap-circle 
       center="d.center" 
       stroke="d.circle.stroke" 
       fill="d.circle.fill" 
       radius="d.circle.radius" 
       visible="d.options.visible"> 
      </ui-gmap-circle> 

     </div> 

    </ui-gmap-google-map> 
</div> 

Trong app.js của tôi, tôi đã viết:

(...) 
.controller('TaihMapController', ['$scope', '$log', 'uiGmapGoogleMapApi', function($scope, $log, GoogleMapApi) { 
    $scope.devicesMarkers = devices; 
    $scope.map = { 
     center: { latitude: devices[0].center.latitude, longitude: devices[0].center.longitude }, 
     zoom: 12, 
     bounds: {} 
     // fit: true, 
    }; 
    GoogleMapApi.then(function(maps) { 
     $log.debug(maps); 
     var myBounds = new maps.LatLngBounds(); 
     for (var k = 0; k < devices.length; k++) { 
      var _tmp_position = new maps.LatLng(
       devices[k].center.latitude, 
       devices[k].center.longitude); 
      myBounds.extend(_tmp_position); 
     } 
    $scope.map.bounds = myBounds; 
    $scope.googleVersion = maps.version; 
    // $scope.bounds = myBounds; 
    // $scope.zoom = maps.getZoom(); 
    // maps.fitBounds(myBounds); 
    // $scope.bounds = maps.getBounds(); 

}); 

Chức năng maps.fitBounds() không tồn tại. Tôi thử cách tiếp cận $scope.map.bounds, nhưng không trả lời theo cách tôi nghĩ.

Answer 1

Theo docs, giới hạn chỉ thị hơi khác với giới hạn bản đồ google. Bạn nên đặt rõ ràng các thuộc tính northeast và southwest với các thuộc tính latitude và longitude riêng của chúng.

Dưới đây nên làm việc:

$scope.map.bounds = { 
    northeast: { 
     latitude: myBounds.getNorthEast().lat(), 
     longitude: myBounds.getNorthEast().lng() 
    }, 
    southwest: { 
     latitude: myBounds.getSouthWest().lat(), 
     longitude: myBounds.getSouthWest().lng() 
    } 
}; 

Answer 2

Nếu bạn đang sử dụng góc-google-map của "cột mốc" chỉ thị, chỉ cần thêm phù hợp = "true" thuộc tính (ui-GMap-dấu).

Ví dụ:

<ui-gmap-google-map center="map.center" zoom="map.zoom" options="map.options"> <ui-gmap-markers fit="true" models="markers" coords="'self'"></ui-gmap-markers> </ui-gmap-google-map>

Nguồn: https://stackoverflow.com/a/29707965