Angularjs - ng-map - Google Maps Javascript API v3 - 如何为多个标记设置最佳缩放
[英]Angularjs - ng-map - Google Maps Javascript API v3 - how to Set best Zoom for Multiple markers
问题描述
I'm using ngMap in an angularjs app.
我在 angularjs 应用程序中使用ngMap 。
I'm displaying google-map with multiple markers onclick of Open map! button我正在显示带有多个标记的谷歌地图onclick of Open map! button onclick of Open map! button and first address present in the addresses array im taking as map center. onclick of Open map! button和地址数组中的第一个地址，我将其作为地图中心。
example.js:例子.js：
angular.module('plunker', ['ui.bootstrap', 'ngMap']);
var ModalDemoCtrl = function ($scope, $modal, $log) {
$scope.displayMap = function () {
$scope.addresses = [{ "address": "Hyderabad" },
{ "address": "Chennai" },
{ "address": "Bangalore" },
{ "address": "Kolkata" },];
$scope.latlng = [];
$scope.loop(0, $scope.addresses)
}
$scope.loop = function (id, addressesresult) {
if (id < addressesresult.length) {
var address = addressesresult[id].address;
geocoder = new google.maps.Geocoder();
geocoder.geocode({
'address': address
}, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
$scope.latlng.push({
"lat": results[0].geometry.location.lat(),
"lng": results[0].geometry.location.lng(),
"title": results[0].formatted_address
});
if (id == ((addressesresult.length) - 1)) {
$scope.openPopup();
}
} else {
console.log('Geocode was not successful for the following reason:' + status);
}
id = id + 1;
$scope.loop(id, addressesresult);
});
}
}
$scope.openPopup = function () {
var modalInstance = $modal.open({
templateUrl: 'modal1',
controller: ModalInstanceCtrl,
scope: $scope,
resolve: {
lat: function () {
return $scope.latlng[0].lat;
},
lng: function () {
return $scope.latlng[0].lng;
},
latlng: function () {
return $scope.latlng;
}
}
});
};
};
// Please note that $modalInstance represents a modal window (instance) dependency.
// It is not the same as the $modal service used above.
var ModalInstanceCtrl = function ($scope, $modalInstance, lat, lng) {
$scope.lat = lat;
$scope.lng = lng;
$scope.render = true;
$scope.close = function () {
$modalInstance.close();
};
};
index.html:索引.html：
<!doctype html>
<html ng-app="plunker">
<head>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>
<script src="http://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.min.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div ng-controller="ModalDemoCtrl">
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body">
<map ng-if="$parent.render" center="[{{$parent.lat}}, {{$parent.lng}}]" zoom-control="true" zoom="8"> </map>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="ok()">OK</button>
<button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</script>
<button class="btn btn-default" ng-click="displayMap()">Open map!</button>
<script type="text/ng-template" id="modal1">
<div class="modal-header googlemodal-header">
<button type="button" ng-click="close()" style="opacity:1" class="close" data-dismiss="modal" aria-hidden="true"> <span style="color:red; ">x</span> </button>
<div align="center"><h3 class="modal-title">Addresses pointing in Google Map </h3></div>
</div>
<div class="modal-body">
<map ng-if="$parent.render" center="[{{lat}}, {{lng}}]" zoom="15" zoom-control="true" style="display:block; width:auto; height:auto;">
<marker ng-repeat="item in latlng"
position="{{item.lat}}, {{item.lng}}"
title="{{item.title}}"></marker>
</map>
</div>
<div class="modal-footer googlemodal-header">
<button class="btn btn-primary btn-sm" ng-click="close()">CLOSE</button>
</div>
</script>
</div>
</body>
</html>
All address related markers are displaying fine.所有与地址相关的标记都显示良好。
But how to set best zoom automatically for array of addresses, here these addresses i'm fetching from database, so these addresses changes for each request based on some condition.但是如何为地址数组自动设置最佳缩放，这里我从数据库中获取这些地址，因此这些地址会根据某些条件针对每个请求进行更改。
2 个解决方案
解决方案1
4 已采纳 2015-07-29 13:31:59
ngMap recently(1.10.0) included a map attribute 'zoom-to-include-markers'. ngMap 最近（1.10.0）包含了一个地图属性“缩放到包含标记”。 You can find an example here, https://rawgit.com/allenhwkim/angularjs-google-maps/master/testapp/map_zoom_to_include_markers.html你可以在这里找到一个例子， https://rawgit.com/allenhwkim/angularjs-google-maps/master/testapp/map_zoom_to_include_markers.html
解决方案2
0 2015-05-05 23:04:09
So the ideal zoom level depends on particular use cases.因此理想的缩放级别取决于特定的用例。 You can pick and choose the same accordingly.您可以相应地选择相同的内容。 In depth explanations can be found in the documentation .可以在文档中找到深入的解释。
Although, I would suggest to have viewport biasing for zoomChanged events.虽然，我建议对zoomChanged事件进行视口偏置。 The snippet shows how to implement it for angular (as suggested here ).该代码段显示了如何为 angular 实现它（如建议的here ）。
This will ensure that the map is centered on the desired marker and you can fit all the markers in the panned area with it as well.这将确保地图以所需标记为中心，并且您也可以将平移区域中的所有标记都放入其中。
<div ng-controller="RectangleZoomCtrl" class="ng-scope"> <map zoom="11" center="33.6803003, -116.173894" map-type-id="TERRAIN" on-zoom_changed="zoomChanged()"> <shape name="rectangle" id="foo" stroke-color="#FF0000" stroke-opacity="0.8" stroke-weight="2" fill-color="#FF0000" fill-opacity="0.35"> </shape> </map> </div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.