angularjs - Angular 中的谷歌地图无法正确更新 map

Question

我正在使用 ng-map 谷歌地图 Angular 库，当我在浏览器中重新加载页面时， map 不更新时遇到问题。我还注意到浏览器要求共享我当前的位置，我是否同意共享位置并不重要，如果我下次访问同一页面， map 会正确更新(无需完全重新加载页面)

 <div class="col-xs-10" ng-show="hasMap == true">
     <map zoom="13" center="{{ location }}"> 
       <marker position="{{ location }}" animation="DROP" icon="blue_marker.png">
       </marker>
    </map>
 </div>

Answer 1

我刚刚也遇到了这个问题。我相信这是由于在 div 以最终大小渲染之前加载了 map 图 block 。

在我的特定情况下，根据 Controller 中设置的变量值向 map 添加 ng-if 解决了问题。例如，尝试添加 ng-if="readyForMap":

  <div class="col-xs-10" ng-show="hasMap == true">
     <map ng-if="readyForMap" zoom="13" center="{{ location }}"> 
       <marker position="{{ location }}" animation="DROP" icon="blue_marker.png">
       </marker>
    </map>
  </div>

然后在 Controller 中将readyForMap的值设置为true:

$scope.readyForMap = true;

起初我将其设置为 true 并设置了超时，但这似乎是不必要的。

我不是 Angular 和 Google map 渲染顺序的专家，所以我不能 100% 确定为什么会这样。然而，这似乎会延迟渲染 map 足够长的时间，以使所有内容都处于正确的位置和大小。