AngularJS, Google Maps 및 InfoWindows

지도에서 마커를 클릭하거나 사용자가 위치 목록에서 위치를 클릭하면 정보 창을 열려고합니다. 내가 겪고있는 문제는 이미 진행중인 $ 응용 프로그램을 받고 있다는 것입니다. 응용 프로그램은 여전히 정상적으로 작동하지만 문서에 따르면이 오류가 표시되는 경우 잘못 처리하고 있습니다. 다음은 내가 다루고있는 두 가지 코드입니다.AngularJS, Google Maps 및 InfoWindows

이 첫 번째 기능은 마커를지도에 배치하고 클릭 마커 클릭 이벤트에 응답합니다.

var placeMarker = function(center) { 
      var marker = new google.maps.Marker({ 
       map : map, 
       position : new google.maps.LatLng(center.location.latitude, center.location.longitude) 
      }); 

      var infoWindow = new google.maps.InfoWindow(); 

      marker.center = center; 
      $scope.markers.push(marker); 

      google.maps.event.addListener(marker, "click", function() { 
       if ($scope.openInfoWindow) { 
        $scope.openInfoWindow.close(); 
       } 

       $scope.center = marker.center; 

       if (!$scope.compiled) { 
        var content = '<div id="infowindow_content" ng-include src="\'/infowindow.html\'"></div>'; 
        $scope.compiled = $compile(content)($scope); 
       } 

       $scope.$apply(); 

       infoWindow.setContent($scope.compiled[0].innerHTML); 
       infoWindow.open(map, marker); 

       $scope.openInfoWindow = infoWindow; 
      }); 
};

여기에 두 번째 기능은 다른 곳에 응용 프로그램에서 이벤트를 받아 Google지도가 나는 열려는 마커에 이벤트를 클릭 보내는 것입니다.

$scope.$on("app:ResultListSelection", function(event, providerNumber) { 
      for (var i = 0, length = $scope.markers.length; i < length; i += 1) { 
       var center = $scope.markers[i].center; 

       if (providerNumber === center.providerNo) { 
        google.maps.event.trigger($scope.markers[i], "click"); 
        break; 
       } 
      } 
     });

마커에서 Google지도 클릭 이벤트가 발생하면 $ apply already in progress 오류가 발생합니다.

내가 잘못 생각한 사람이 있습니까? 내가 아는

출처

2013-01-23 Kyle Buchanan

어떻게 호출 기능 장소 마커? '$ scope. $ apply()'행을 주석 처리하면 오류가 사라지고 앱이 여전히 작동합니까? Angular의 "inside"에 $ apply()를 호출하면 오류가 발생합니다. 즉, Angular는 이미 [$ digest loop] (http://docs.angularjs.org/guide/concepts)에 있습니다 - "런타임"절의 그림을 참조하십시오. Angular는 이미 $ apply 안에 있습니다. –

placeMarker는 $ rootScope에서 마커를 배치하는 데 필요한 모든 정보를 전달하는 이벤트를 받으면 호출됩니다. $ scope. $ apply()를 주석 처리하면 오류는 발생하지 않지만 infoWindow는 표시되지 않습니다. "런타임"에서 사진을 확인하여 문제가 해결되는지 확인하겠습니다. –

아마이 할 수있는 더 좋은 방법이있다,하지만 난에 데이터를 전달하는 동안 템플릿을 컴파일 내 프로젝트에 underscore.js 및 사용 밑줄을 추가 끝났다.

var template = _.template($("#infoWindowTmpl").html()), 
    compiled = template($scope); 

var infoWindow = new google.maps.InfoWindow({ 
    content : compiled 
});

출처

2013-01-29 16:44:48

AngularJS, Google Maps 및 InfoWindows

답변

관련 문제