与zoom-to-include-markers =“true”一起使用时，ng-map默认缩放太大了

Question

我正在尝试使用地图，当我只有一个标记并且zoom-to-include-markers =“true”时，我正面临着这种情况，结果就是地图太大了，无论如何如何设置zoom属性，结果如下所示：

虽然我想要的第一个渲染应该看起来像这样：

这是我的代码：

<ng-map
        ng-if="items"
        zoom="5"
        map-type-id="ROADMAP"
        pan-control="false"
        street-view-control="true"
        street-view-control-options="{position: 'RIGHT_BOTTOM'}"
        map-type-control="false"
        zoom-control="true"
        zoom-control-options="{style:'BIG', position: 'RIGHT_BOTTOM'}"
        scale-control="true"
        default-style="true"
        zoom-to-include-markers="true"
        class="map">

    <marker on-click="" data-ng-repeat="item in items" position="{{[item.latitude, item.longitude]}}">
    </marker>

</ng-map>

我尝试调整zoom属性，但地图结果没有变化。

更新

使用js中的setZoom（）函数更改缩放是这样做的，有没有办法根据地图的值计算合适的缩放？

由于

Answer 1

对于单个标记的情况，您可以指定maxZoom和minZoom属性以限制将在地图上显示的地图缩放级别。

示例

该示例演示了如何通过maxZoom指令的maximum-zoom属性设置map：

＆＃13;

＆＃13;

angular.module('mapApp', ['ngMap'])

  .controller('mapCntrl', function (NgMap, $scope) {
    $scope.items = [
      //{ id: 1, name: 'Oslo', latitude: 59.923043, longitude: 10.752839 },
      { id: 2, name: 'Stockholm', latitude: 59.339025, longitude: 18.065818 },
      //{ id: 3, name: 'Copenhagen', latitude: 55.675507, longitude: 12.574227 },
      //{ id: 4, name: 'Berlin', latitude: 52.521248, longitude: 13.399038 },
      //{ id: 5, name: 'Paris', latitude: 48.856127, longitude: 2.346525 }
    ];

    NgMap.getMap().then(function (map) {
      $scope.map = map;
    });

  });

＆＃13;

<script src="https://code.angularjs.org/1.4.8/angular.js"></script>
	<script src="https://maps.googleapis.com/maps/api/js"></script>
	<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
<div ng-app="mapApp" ng-controller="mapCntrl">

		<ng-map maximum-zoom="14" ng-if="items" zoom="5" map-type-id="ROADMAP" pan-control="false" street-view-control="true" street-view-control-options="{position: 'RIGHT_BOTTOM'}"
			map-type-control="false" zoom-control="true" zoom-control-options="{style:'BIG', position: 'RIGHT_BOTTOM'}" scale-control="true"
			default-style="true" zoom-to-include-markers="true"  class="map">

			<marker on-click="" data-ng-repeat="item in items" position="{{[item.latitude, item.longitude]}}">
			</marker>

		</ng-map>

</div>

＆＃13;

＆＃13;

＆＃13;

<强>更新

另一种选择是在地图准备好后强制地图设置缩放级别。关键是zoom-to-include-markers="true"设置视口，而视口又在单个标记的情况下将缩放设置为最大值。这就是zoom="5"被忽略的原因。

以下示例显示如何使用zoom-to-include-markers="true"设置缩放级别：

NgMap.getMap().then(function (map) {
  map.setZoom(12);
});

演示

＆＃13;

＆＃13;

angular.module('mapApp', ['ngMap'])

  .controller('mapCntrl', function (NgMap, $scope) {
    $scope.items = [
      //{ id: 1, name: 'Oslo', latitude: 59.923043, longitude: 10.752839 },
      //{ id: 2, name: 'Stockholm', latitude: 59.339025, longitude: 18.065818 },
      //{ id: 3, name: 'Copenhagen', latitude: 55.675507, longitude: 12.574227 },
      //{ id: 4, name: 'Berlin', latitude: 52.521248, longitude: 13.399038 },
      { id: 5, name: 'Paris', latitude: 48.856127, longitude: 2.346525 }
    ];

    $scope.maxZoomForSinglePOI = 17;

    NgMap.getMap().then(function (map) {
      if(map.getZoom() > $scope.maxZoomForSinglePOI){
         map.setZoom($scope.maxZoomForSinglePOI);
      }
    });

  });

＆＃13;

<script src="https://code.angularjs.org/1.4.8/angular.js"></script>
	<script src="https://maps.googleapis.com/maps/api/js"></script>
	<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
<div ng-app="mapApp" ng-controller="mapCntrl">

		<ng-map ng-if="items" zoom="5" map-type-id="ROADMAP" pan-control="false" street-view-control="true" street-view-control-options="{position: 'RIGHT_BOTTOM'}"
			map-type-control="false" zoom-control="true" zoom-control-options="{style:'BIG', position: 'RIGHT_BOTTOM'}" scale-control="true"
			default-style="true" zoom-to-include-markers="true"  class="map">

			<marker on-click="" data-ng-repeat="item in items" position="{{[item.latitude, item.longitude]}}">
			</marker>

		</ng-map>

	</div>

＆＃13;

＆＃13;

＆＃13;