Question

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

我制作了一个指令并保留在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);

之后

但它仍无效。

Answer 1

好像你没有将initialize绑定到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);
 };

AngularJS谷歌地图未在第一个视图

1 个答案: