AngularJS/NgMap-在引脚设置更改时重新输入映射

AngularJS/NgMap - Recenter map as pin sets change

本文关键字：新输入 输入 映射 NgMap- 引脚 设置 AngularJS      更新时间：2023-09-26

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

我正在利用缩放在地图元素中包括标记标签，但当设置为自动时，缩放是不稳定的，而且经常是错误的，使用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>

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>

Plunker

相关文章：