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属性。

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

＆＃13;

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}
  ];
  
});

＆＃13;

<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>

＆＃13;

JSFiddle

来自ng-map存储库的

More examples

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

1 个答案: