谷歌嵌入地圖渲染破壞有時

-1

Perfect Map

，有時加載這個古怪的偏心破碎的世界地圖這樣

Broken map

有誰知道爲什麼我有時會破地圖？還有，我如何解決它始終呈現正確的地圖？

一些背景，我使用AngularJs建立在iframe的SRC。

UPDATE 這裏的HTML

<div ng-controller="MapCtrl" class="left" id="interactiveMap"> 
     <iframe 
      width="300" 
      height="225" 
      frameborder="0" style="border:0" 
      ng-src={{map.url}}> 
     </iframe> 


    </div>

而且MapCtrl

(function() { 
'use strict'; 

function MapCtrl($scope, $http, $sce, $timeout) { 

    $scope.$parent.$watchCollection('business', function() { 
     $scope.getPreAddress() 

     $timeout(function() { 
      $scope.getMap() 
     },2000) 


    },true) 

    $scope.getPreAddress = function() { 
     var preAddress = $scope.business.address1 + 
     " " + $scope.business.address2 + 
     ","+ $scope.business.city+ 
     " " + $scope.business.state + 
     " "+ $scope.business.zip 

     return preAddress.replace(/ /g, "+")    
    } 

    $scope.getMap = function() { 
     $http.get("/src/json/map-keys.json").success(function(data){ 
      $scope.keys = data 
      $scope.map = { 
       url:$sce.trustAsResourceUrl("https://www.google.com/maps/embed/v1/place?key="+$scope.keys.google.google_key+"&q="+$scope.getPreAddress()+"&zoom=16") 
      } 
     })     
    } 

} 
module.exports = MapCtrl

}）（）

來源

2014-06-27 Veg

當您加載地圖時，iframe需要有一個大小，當它看起來像第二個圖像時，它顯然沒有大小 –

@ Dr.Molle高度/寬度在iframe中被硬編碼。是否有優先考慮的地方？我認爲CSS後載入html ... – Veg

的相關大小是真實的，計算大小。當父元素在iframe-src加載時隱藏時，iframe的計算大小爲0x0 –

對於有關方面....原來，這個問題是該上面的HTML包含在首先隱藏的更大的div中。 Google嵌入的地圖在隱藏div內行爲不正確。解決方案是將div推高到視覺上隱藏，而不是字面上。

來源

2014-07-02 21:20:11 Veg

谷歌嵌入地圖渲染破壞有時

回答

相關問題