谷歌地圖與angularjs創建的標籤不集中

我有以下問題：谷歌地圖與angularjs創建的標籤不集中

我在aplication工作來預訂酒店有標籤（「酒店詳情」，「地圖」，「評論」）在概述頁面中。選項卡是使用angularjs創建的。也在頁面中我有酒店地址是「地圖」選項卡的鏈接。當我點擊「地圖」標籤時，谷歌地圖渲染正常。但是，當我點擊酒店地址時，「地圖」選項卡打開，但地圖不居中。如果我刷新頁面，它看起來居中。

這是處理地圖代碼：

$scope.loadMap = function (targetID){ 
      var latitude = $scope.latitude;  
      var longitude = $scope.longitude; 
      if(latitude && longitude && document.getElementById(targetID) != null){ 
       var center = new google.maps.LatLng(latitude, longitude); 
       var map_options = { 
        zoom: 13, 
        center: center, 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
       }; 

       // create map 
       var map = new google.maps.Map(document.getElementById(targetID), map_options); 

       // configure marker 
       var marker_options = { 
        map: map, 
        position: center, 
        title: $scope.hotelName 
       }; 

       // create marker 
       var marker = new google.maps.Marker(marker_options); 

       var infoWindow = new google.maps.InfoWindow(); 

       window.setTimeout(function(){ 
        google.maps.event.trigger(map, 'resize'); 
       },2000); 
      } 
     }

你能幫助我嗎？

來源

2013-10-23 AdrianGNR

你可以發佈一個jsFiddle（或同等學歷）嗎？另外，您應該考慮使用'$ window'，'$ timeout'和'$ document'服務。 –

嗨，你真的不應該從你的範圍引用HTML元素......這將導致內存泄漏，並且通常是Angular的一個壞方法。 – Spock

我在使用Leaflet.js創建地圖時遇到了這個問題。我試圖初始化我的角度服務裏面的地圖，它加載非常奇怪。看起來你正在嘗試做同樣的事情，但是你是在控制器內部而不是服務器上做的，但效果是一樣的。

問題是時機。您的控制器在DOM完成加載之前運行，並且angular有機會掃描DOM以部分構建您的Map頁面。因此，當您撥打$scope.loadMap時，頁面只會部分加載，這會加載google地圖，就像您期望的那樣。問題是，一旦Angular完成掃描DOM部分，它會修改DOM，然後將其加載到視圖中。發生這種情況時，Google地圖已根據DOM的以前狀態初始化爲其默認大小，並且在使用DOM完成角度時不會正確調整大小。

好吧，這是一個長期的解釋，但這裏是你如何解決這個問題：

你應該做你的地圖初始化的指令的邏輯函數內。您可以創建一個名爲app.directive('hotelMap')的指令，它將使用控制器中的$scope.latitude和$scope.longitude變量初始化您的地圖。

link: function(scope, elem, attrs){ 
    var center = new google.maps.LatLng(scope.latitude, scope.longitude); 
    var map_options = { 
     zoom: 13, 
     center: center, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    // create map 
    var map = new google.maps.Map(document.getElementById(targetID), map_options); 
    // configure marker 
    var marker_options = { 
     map: map, 
     position: center, 
     title: $scope.hotelName 
    }; 
    // create marker 
    var marker = new google.maps.Marker(marker_options); 
    var infoWindow = new google.maps.InfoWindow(); 
}

，然後在地圖部分，你會看起來像<div hotel-map></div>的元素。這解決了你的問題，因爲你的地圖永遠不會被初始化，直到Angular完成掃描/修改DOM並完成渲染你的部分。這樣，地圖的包含元素將處於其最終大小/位置，並且地圖將正確加載到元素的中心。試一試，讓我知道如果這有效。

來源

2013-10-24 03:25:47 tennisgent

谷歌地圖與angularjs創建的標籤不集中

回答

相關問題