当与 zoom-to-include-markers="true" 一起使用时,ng-map 默认缩放过于放大
ng-map default zoom is too zoomed in when used with zoom-to-include-markers="true"
我正在尝试使用地图,当我只有一个标记并且缩放到包含标记="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()函数改变缩放就可以了,有没有办法根据地图的值计算出合适的缩放?
谢谢
对于单个标记的情况,您可以指定 maxZoom
和 minZoom
属性来限制将在地图上显示的地图缩放级别。
例子
该示例演示了如何通过 map
指令的 maximum-zoom
属性设置 maxZoom
:
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;
});
});
<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>
更新
另一种选择是在地图 就绪 后强制地图设置缩放级别。关键是 zoom-to-include-markers="true"
设置视口,在单个标记的情况下又将缩放设置为最大。这就是 zoom="5"
被忽略的原因。
以下示例显示如何使用 zoom-to-include-markers="true"
设置缩放级别:
NgMap.getMap().then(function (map) {
map.setZoom(12);
});
演示
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);
}
});
});
<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>
我正在尝试使用地图,当我只有一个标记并且缩放到包含标记="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()函数改变缩放就可以了,有没有办法根据地图的值计算出合适的缩放?
谢谢
对于单个标记的情况,您可以指定 maxZoom
和 minZoom
属性来限制将在地图上显示的地图缩放级别。
例子
该示例演示了如何通过 map
指令的 maximum-zoom
属性设置 maxZoom
:
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;
});
});
<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>
更新
另一种选择是在地图 就绪 后强制地图设置缩放级别。关键是 zoom-to-include-markers="true"
设置视口,在单个标记的情况下又将缩放设置为最大。这就是 zoom="5"
被忽略的原因。
以下示例显示如何使用 zoom-to-include-markers="true"
设置缩放级别:
NgMap.getMap().then(function (map) {
map.setZoom(12);
});
演示
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);
}
});
});
<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>