ngMap基于所有标记进行缩放

时间:2016-12-14 14:25:47

标签: angularjs google-maps google-maps-api-3 ng-map

我有一个场景,我必须在地图上显示所有标记。我使用角度图能够看到所有标记,但缩放级别失控。我无法限制它显示三个地图副本的缩放级别。我创建了plunker

如何显示所有可见的标记。任何人都可以帮助我。

<map zoom-to-include-markers="auto" center="[{{ center.lat }}, {{ center.lng }}]">
    <marker position="[{{ center.lat }}, {{  center.lng }}]"></marker>
    <marker ng-repeat="result in results track by $index" position="[{{ result.lat }}, {{ result.lng }}]"></marker>
</map>

$scope.results = [
    {"lat":17.51081384,"lng":78.35414886},
    {"lat":17.49018563,"lng":78.39860916},
    {"lat":38.50795202,"lng":-121.503544},
    {"lat":38.50795044,"lng":-121.50354534},
    {"lat":38.50794677,"lng":-121.50354065},
    {"lat":40.75376321,"lng":-73.9868018},
    {"lat":68.39918004,"lng":101.6015625},
    {"lat":17.4140375,"lng":78.40826511},
    {"lat":17.5124509,"lng":78.37766647},
    {"lat":17.36538432,"lng":78.55173111},
    {"lat":17.40805893,"lng":78.4905982},
    {"lat":17.51048643,"lng":78.35294724},
    {"lat":17.51277831,"lng":78.35483551},
    {"lat":17.41845987,"lng":78.49113464},
    {"lat":82.58610635,"lng":-31.9921875},
    {"lat":-20.30341752,"lng":-56.77734375},
    {"lat":27.05912578,"lng":2.28515625}
];

enter image description here

1 个答案:

答案 0 :(得分:2)

你无法避免谷歌地图重复 - &gt;没有解决方案,因为它是谷歌地图的一个功能。

取决于地图分辨率。这是一个plunker,其中包含一个不同格式的小地图。重复是Google地图功能。您可以尝试强制显示地图的格式,以便不重复显示。请记住,用户将始终可以通过向东或向西滚动来查看重复的地图。

<div style="width:250px;height:100px">
  <map zoom-to-include-markers="auto" center="[{{ center.lat }}, {{ center.lng }}]">
    <marker position="[{{ center.lat }}, {{  center.lng }}]"></marker>
    <marker ng-repeat="result in results track by $index" position="[{{ result.lat }}, {{ result.lng }}]"></marker>
  </map>
</div>