初始通话后Google Map没有完全加载 [英] Google Map not loading completely after inital call

问题描述

我在我的网站上使用了 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：如何删除所有标记？

< a href =https://stackoverflow.com/questions/3777810/google-maps-dont-fully-load> Google地图未完全加载

编辑

似乎部分原因是当用户点击第二个链接时，我并未刷新页面。我只使用散列，然后加载它......不知道是否有什么我应该做的不同，为此？

解决方案

这是我设法做到的，你在控制器中定义了初始化函数，然后相对于范围调用它作为$ 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（）; 
 
}]）; 
  

I'm using Angular.js on my website and i'm able to load the map with a pin on a particular geocode with data i'm getting from a GET request on my server. However, when the user goes to a new page, the map loads...but only partially. The rest of the map is a gray area. My code is below:

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

Is there a reason the map loads partially on the next page? When I do a refresh it then loads it in full, but why is it not working initially?

I read the following on this:

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

EDIT

It seems part of the reason is that i'm not refreshing the page when the user clicks on the second link. I'm only using hashes and then loading it that way... Not sure if there's something I should be doing differently for this?

解决方案

This is how i managed to make it, you define the initialize function in the controller then call it relatively to the scope as $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();

}]);

这篇关于初始通话后Google Map没有完全加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！