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

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

初始通话后Google地图未完全加载

2 个答案: