-1

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

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

Plunk：http ://plnkr.co/edit/qaLFYD?p=preview

<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>

4

1 回答 1

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

工作示例 

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

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

普朗克

于 2015-11-14T11:33:01.323 回答