Question

我使用AngularJS和NgMap显示一个Google Map实例，该实例显示一组根据3个不同选择列表中的位置选择过滤/关闭的引脚。随着焦点越来越紧张（从地区，州/省/欧盟国家到城市），我希望地图缩放以更接近该位置。

我在地图元素中使用了zoom-to-include-markers标记，但是当设置为auto时，缩放是不稳定的并且经常是错误的，并且使用true，缩放永远不会发生，尽管它确实保留所有视图中的元素。

普兰克：http://plnkr.co/edit/qaLFYD?p=preview

＆＃13;

<div map-lazy-load="http://maps.google.com/maps/api/js">
  <map zoom="2" scrollwheel="false" zoom-to-include-markers="true">
    <span ng-repeat="site in (dataObject | ForMap : {region:selectRegion, state:selectState, city:selectCity}) track by $index" id="{{data.Id}}">
    <marker position="[{{site.Latitude}},{{site.Longitude}}]"></marker>
</span>
  </map>
</div>

＆＃13;

Answer 1

ngMap没有观看标记，这就是为什么在更新标记后，地图视口不会居中并缩放（通过zoom-to-include-markers属性）。但您可以考虑更新视口并显式缩放。为此，我们介绍以下函数：

$scope.zoomToIncludeMarkers = function(cities) {
      var bounds = new google.maps.LatLngBounds();
      cities.forEach(function(c) {
        var latLng = new google.maps.LatLng(c.pos[0],c.pos[1]);
        bounds.extend(latLng);
      });
      $scope.map.fitBounds(bounds);
      if(cities.length == 1){
         $scope.map.setZoom(5);
      }
  };

其中cities在我的案例中具有以下结构：

$scope.cities = [
    {id: 1,name: 'Oslo', pos:[59.923043, 10.752839]},
    {id: 2,name: 'Stockholm',pos:[59.339025, 18.065818]},
    {id: 3,name: 'Copenhagen',pos:[55.675507, 12.574227]},
    {id: 4,name: 'Berlin',pos:[52.521248, 13.399038]},
    {id: 5,name: 'Paris',pos:[48.856127, 2.346525]}
  ];

因此，每次更改标记后，我们都需要调用：

$scope.zoomToIncludeMarkers($scope.cities);

工作示例

＆＃13;

angular.module('ngMap').controller('MyCtrl', function($scope) {

  
  $scope.selectedCities = [];
  $scope.cities = [
    {id: 1,name: 'Oslo', pos:[59.923043, 10.752839]},
    {id: 2,name: 'Stockholm',pos:[59.339025, 18.065818]},
    {id: 3,name: 'Copenhagen',pos:[55.675507, 12.574227]},
    {id: 4,name: 'Berlin',pos:[52.521248, 13.399038]},
    {id: 5,name: 'Paris',pos:[48.856127, 2.346525]}
  ];

  
  

  
  
  $scope.selectionsChanged = function(){
    $scope.selectedCities = [];
    $scope.selectedValues.forEach(function(cid){
       var city = $scope.cities.filter(function(c){ 
             if(c.id == parseInt(cid))
                return c;    
       })[0];
       $scope.selectedCities.push(city);
    });

    $scope.zoomToIncludeMarkers();
  };

  $scope.zoomToIncludeMarkers = function() {
      var bounds = new google.maps.LatLngBounds();
      $scope.selectedCities.forEach(function(c) {
        var latLng = new google.maps.LatLng(c.pos[0],c.pos[1]);
        bounds.extend(latLng);
      });
      $scope.map.fitBounds(bounds);
      if($scope.selectedCities.length == 1){
         $scope.map.setZoom(5);
      }
  };

});

＆＃13;

<script src="https://maps.google.com/maps/api/js?libraries=placeses,visualization,drawing,geometry,places"></script>
<script src="http://code.angularjs.org/1.2.25/angular.js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
<div ng-app="ngMap" ng-controller="MyCtrl">   
   <h2>Select cities:</h2>
   <select multiple ng-model="selectedValues" ng-change="selectionsChanged()">
        <option ng:repeat="c in cities" selected value="{{c.id}}">{{c.name}}</option>
    </select>

    <!--tt> selectedValues = {{selectedCities}}</tt-->

  <ng-map zoom="5" center="{{center}}"
    scrollwheel="false"
    zoom-to-include-markers="true">
    <marker ng-repeat="c in selectedCities"
      position="{{c.pos}}" title="{{c.name}}"></marker>
  </ng-map>
</div>

＆＃13;

Plunker

AngularJS / NgMap - 作为引脚设置的Recenter地图更改

1 个答案: