我的 Google 地图中有一个动态生成的标记列表。我希望地图的中心成为所有标记的中心,并缩小到足以使所有标记都在视图中。
在计算地图中心方面,也许可以通过迭代所有的纬度和经度并找到中心点来实现。但是,我无法找出计算缩放比例的最佳方法。
这有可能实现吗?
我的地图在模板中使用如下:
<ui-gmap-google-map events="map.events" center="map.center" zoom="map.zoom" draggable="true" options="options">
<ui-gmap-marker ng-repeat="home in filteredHomes = (resCtrl.filteredHomes | orderBy : $storage.params.orderby : $storage.params.reverseOrder)" coords="{latitude: home.location.latitude, longitude: home.location.longitude}" idkey="home.homeId">
</ui-gmap-marker>
</ui-gmap-google-map>
UPDATE
根据 @Tiborg 的建议尝试 Angular 实现:
uiGmapGoogleMapApi.then(function(maps) {
$scope.map = {
center: $scope.$storage.params.views.map.location,
zoom: $scope.$storage.params.views.map.zoom,
events: {
click: function() {
var bounds = new google.maps.LatLngBounds();
for (var i in $scope.filteredHomes) {
bounds.extend($scope.filteredHomes[i].location);
}
$scope.map.fitBounds(bounds);
}
}
};
});
这会产生控制台错误:TypeError: undefined is not a function (evaluating 'a.lat()')
使用 Google Maps API 中的 LatLngBounds 类,如下所示:
var bounds = new google.maps.LatLngBounds();
for (var i in markers) // your marker list here
bounds.extend(markers[i].position) // your marker position, must be a LatLng instance
map.fitBounds(bounds); // map should be your map class
它将很好地缩放地图并将其居中以适合您的所有标记。
当然,这是纯 JavaScript,而不是 Angular 版本,因此,如果您在 Angular 中实现它时遇到问题(或者您无法访问获取标记的地图实例),请告诉我。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)