javascript - 在 Angular View 中显示谷歌地图的间歇性问题

Question

我在 Angular View 中嵌入了一个谷歌地图，它有时会显示(如下右图所示)，然后当我刷新页面时显示为灰色(左下图)。

我对谷歌的引用位于页面标题中，如下所示:

<script src="https://maps.google.com/maps/api/js?key=<api_key>" type="text/javascript"></script>

我的 html(在 Angular View 中)看起来像这样:

        <div id="map_canvas" style="width: 100%; height: 300px"></div>

我在 View Controller 中的代码如下所示:

var geocoder = new google.maps.Geocoder();
geocoder.geocode({ 'address': addressLine }, function (results, status) {

     if (status == google.maps.GeocoderStatus.OK) {
          var myLatLng = { lat: results[0].geometry.location.lat(), 
                           lng: results[0].geometry.location.lng() };

     var myOptions = { zoom: 8, center: myLatLng };
     var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

     var marker = new google.maps.Marker({
          position: myLatLng,
          map: map,
          title: name
          });
     }
});

有谁知道为什么会发生这种情况？或者以前经历过这种情况吗？

提前致谢!

Answer 1

为您的 Google map 创建指令。状态 Controller 在 View 加载之前执行。指令的 Controller 将在 View 之后加载。

那里很可能有大量的 Google map 指令。因此，只需找到已经存在的东西并对其进行调整即可。

例如:http://angular-ui.github.io/angular-google-maps/#!/