初次通话后谷歌地图未完全加载

Question

我在我的网站上使用Angular.js，并且我能够使用特定地理编码上的引脚加载地图，其中包含我从服务器上的GET 请求中获取的数据。但是，当用户转到新页面时，地图会加载……但只是部分加载。地图的其余部分是灰色区域。我的代码如下：

data.map.center = new google.maps.LatLng(parseFloat(response.geocode.latitude), parseFloat(response.geocode.longitude));
data.map.mapEnabled = true;
var map_canvas = document.getElementById('map_canvas');
var map_options = {
    center: data.map.center,
    zoom: 15,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    zoomControl: false,
    panControl: false,
    scrollwheel: false,
    draggable: false,
    mapTypeControl: false,
    streetViewControl: false
};

data.map.mapObject = new google.maps.Map(map_canvas, map_options);
var marker = new google.maps.Marker({
    map: data.map.mapObject,
    position: data.map.center
});

地图部分加载到下一页是否有原因？当我进行刷新时，它会完全加载它，但为什么它最初不起作用？

我阅读了以下内容：

Google Maps API v3: How to remove all markers?

Google Maps API V3 not rendering competely on tabbed page using Twitter's Bootstrap

Google Maps don't fully load

编辑

似乎部分原因是当用户单击第二个链接时我没有刷新页面。我只使用哈希然后以这种方式加载它......不确定我是否应该为此做些不同的事情？

Answer 1

这就是我设法做到的，您在控制器中定义初始化函数，然后将其相对于范围调用为 $scope.initialize

appControllers.controller('ContactpageController',['$scope',function($scope){


$scope.initialize=function() {
          var myLatlng = new google.maps.LatLng(-37.815207, 144.963937);
          var mapOptions = {
              zoom: 15,
              scrollwheel: false,
              center: myLatlng,
              mapTypeId: google.maps.MapTypeId.ROADMAP
          }
          var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
          var marker = new google.maps.Marker({
              position: myLatlng,
              map: map,
              title: 'Hello World!'
          });
      }

      $scope.initialize();

}]);

Answer 2

在这里找到答案：

http://www.ultrawebsites.com/2013/05/angularjs-angularui-maps-module-and-page-reload/

我的代码在这里：

setTimeout(function () {
    google.maps.event.trigger(data.map.mapObject, 'resize');
    data.map.mapObject.setCenter(data.map.center);
}, 100);

我把它放在上面的代码下面。