-1

有时我的地图会像这样正常加载。

完美地图

有时它会像这样加载这个奇怪的偏离中心的破碎世界地图

残破的地图

有谁知道为什么我有时会得到损坏的地图？而且，我怎样才能修复它以始终呈现正确的地图？

一些背景知识，我正在使用 AngularJs 在 iframe 中创建 src。

更新 这是 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

})()

4

1 回答 1

1

对于感兴趣的各方....问题原来是上面的 HTML 包含在一个较大的 div 中，该 div 一开始是隐藏的。Google 嵌入地图在隐藏的 div 中无法正常运行。解决方案是将 div 推得很高，以便在视觉上而不是字面上隐藏。

于 2014-07-02T21:20:11.330 回答