AngularJS google地图没有在第一个视图上更新其内容。

Question

这是一个单一的页面角应用程序。我需要根据来自远程的城市、纬度和经度值显示一个地图列表。

我做了一个指令，并把它保存在一个ng-重复的地方，以显示地图。，我的问题是地图没有在第一个视图上得到更新。如果我按下next按钮来显示下一组列表，则地图开始显示其内容。即使它开始显示内容，如果我按下检查元素按钮。或者关闭“检查元素”按钮。

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);之后

但还是不起作用。

Answer 1

似乎还没有将初始化绑定到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);
 };