AngularJS谷歌地圖不在第一個視圖上更新其內容

其單頁角度應用程序。我需要根據來自遠程的城市或經度和緯度值顯示地圖列表。AngularJS谷歌地圖不在第一個視圖上更新其內容

我做了一個指令，並保存在ng-repeat中以顯示地圖。 我的問題是地圖沒有得到第一個視圖的更新。如果我按下一個按鈕來顯示下一組列表，地圖會開始顯示其內容。即使它開始顯示內容，如果我按檢查元素按鈕。或關閉檢查元素按鈕。

my.html

<div ng-repeat="project in allProjects"> 
    <map-image latitude-longitude="{{project.latlongstring}}" cityname="{{project.city.name}}" object-id="{{project.id}}"> 
     <div id="map_{{project.id}}" style="height: 100%;"></div> 
    </map-image> 
</div

我向鏈路功能包含代碼以顯示地圖。 My.map.js

link: function(scope, iElm, iAttrs, controller) { 
    var html =""; 
    var tempalate = ""; 
    var map; 
    var geocoder; 

    scope.$watchGroup(['latitudeLongitude', 'city'], function() { 
      if(scope.latitudeLongitude){ 
InitializeMap("latitudeLongitude",scope.latitudeLongitude.split(',')); 

      }else if(scope.city){ 
       codeAddress(scope.city) 
      } 

    }); 

    function InitializeMap(param, value) { 
     var latlng = new google.maps.LatLng(value[0],value[1]); 
     var myOptions = 
        { 
         zoom: 8, 
         center: latlng, 
         mapTypeId: google.maps.MapTypeId.ROADMAP, 
         disableDefaultUI: true 
        }; 

     map = new google.maps.Map(document.getElementById("map_"+scope.objectid), myOptions); 

    } 

    var geocoder = new google.maps.Geocoder(); 

    function codeAddress(address) { 

     geocoder.geocode({ 'address': address }, function(results, status) { 
      if (status === google.maps.GeocoderStatus.OK) { 
       InitializeMap(null, [results[0].geometry.location.G,results[0].geometry.location.K]) 

      }else { 
       console.log("Geocode unsuccessful"); 
      } 
    }); 
};

在使用

if(!scope.$$phase){ 
    scope.$apply(); 
}

行map = new google.maps.Map(document.getElementById("map_"+scope.objectid), myOptions);

但它仍然沒有工作後嘗試。

來源

2015-08-21 Explore-X

好像你沒有綁定初始化addDomListener事件。您需要將其綁定如下

google.maps.event.addDomListener(window, 'load', InitializeMap);

試試這個，

link: function(scope, iElm, iAttrs, controller) { 
    var html =""; 
    var tempalate = ""; 
    var map; 
    var geocoder; 

    scope.$watchGroup(['latitudeLongitude', 'city'], function() { 
      if(scope.latitudeLongitude){ 
InitializeMap("latitudeLongitude",scope.latitudeLongitude.split(',')); 

      }else if(scope.city){ 
       codeAddress(scope.city) 
      } 

    }); 

    function InitializeMap(param, value) { 
     var latlng = new google.maps.LatLng(value[0],value[1]); 
     var myOptions = 
        { 
         zoom: 8, 
         center: latlng, 
         mapTypeId: google.maps.MapTypeId.ROADMAP, 
         disableDefaultUI: true 
        }; 

     map = new google.maps.Map(document.getElementById("map_"+scope.objectid), myOptions); 

    } 

    var geocoder = new google.maps.Geocoder(); 

    function codeAddress(address) { 

     geocoder.geocode({ 'address': address }, function(results, status) { 
      if (status === google.maps.GeocoderStatus.OK) { 
       InitializeMap(null, [results[0].geometry.location.G,results[0].geometry.location.K]) 

      }else { 
       console.log("Geocode unsuccessful"); 
      } 
    }); 

    google.maps.event.addDomListener(window, 'load', InitializeMap); 
};

來源

2015-08-21 12:16:42

沒有它不工作。我的問題是地圖開始顯示圖像，當我在瀏覽器中執行一些外部事件時，比如打開檢查元素。或關閉檢查元素。 –

已經實現了分頁，就像前10個地圖一樣首先顯示。點擊下一個按鈕後，會顯示另外10個地圖。從第二個列表中，我可以查看地圖圖像。問題在於第一種觀點。 –

問題是，您的地圖未在加載時初始化。把google.maps.event.addDomListener（window，'load'，InitializeMap）;在控制器中並嘗試。 –

AngularJS谷歌地圖不在第一個視圖上更新其內容

回答

相關問題