javascript - Ng-map-在地图上显示所有标记-如何计算缩放级别和中心位置

Question

我使用 ng-map 加载地图并显示标记，如下所示。

<ng-map center="[{{userpos.coords.latitude}},{{userpos.coords.longitude}}]" zoom="12" default-style="false">
        <div ng-repeat="p in points">
            <marker title="{{p.title}}" icon="{{getMarker(p.warning)}}"  position="{{p.latitude}}, {{p.longitude}}" ></marker>
        </div>
    </ng-map>

我的问题是所有标记都无法在地图中显示。为了显示所有内容，我必须设置合适的缩放和中心指令。如何找到它们

Answer 1

为此目的，在 ngMap (1.10.0) 中引入了zoom-to-include-markers属性。

该示例演示如何居中/缩放地图以覆盖所有可见标记

angular.module('ngMap').controller('MyCtrl', function($scope) {
  $scope.points =[
    {title: '', latitude: 40.71, longitude: -74.21},
    {title: '', latitude: 41.72, longitude: -73.20},
    {title: '', latitude: 42.73, longitude: -72.19},
    {title: '', latitude: 43.74, longitude: -71.18},
    {title: '', latitude: 44.75, longitude: -70.17},
    {title: '', latitude: 45.76, longitude: -69.16},
    {title: '', latitude: 46.77, longitude: -68.15}
  ];
  
});

<script type="text/javascript" src="https://maps.google.com/maps/api/js"></script>
<script type="text/javascript" src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script type="text/javascript" src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>

<div ng-app="ngMap" ng-controller="MyCtrl">
  <ng-map 
    zoom-to-include-markers="true">
    
    <div ng-repeat="p in points">
            <marker title="{{p.title}}" position="{{p.latitude}}, {{p.longitude}}" ></marker>
        </div>  
  </ng-map>
</div>

JSFiddle

来自 ng-map 存储库的更多示例