带有 Angular JS 和 google 地图信息窗口的动态 HTML

Question

尝试在 infoWindow 中显示一些 html 时遇到问题。

在这个例子中，我想在每次点击标记时增加 $scope.number 的值，问题是该值正确增加（你可以 console.log 看到它）但是 infoWindow 仍然显示 0

PS: 我真的需要将 infoWindow 内容设置为 document.getElementById

感谢并抱歉我的英语不好 :D

  $scope.number=0;  
  
  $scope.infoWindow = new google.maps.InfoWindow({
    content: document.getElementById("infoWindow")
  });

  
  navigator.geolocation.getCurrentPosition(function(pos){
    
    $scope.position = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude);
     
    var mapOptions = {
      center: $scope.position,
      zoom: 7,
      mapTypeId: google.maps.MapTypeId.ROADMAP
     };

    $scope.map = new google.maps.Map(document.getElementById("map"), mapOptions);
  
    var marker1 = new google.maps.Marker({
      position: new google.maps.LatLng(36.712215,3.196801),
      map: $scope.map
    });
      
    var marker2 = new google.maps.Marker({
      position: new google.maps.LatLng(36.759615,2.9286236),
      map: $scope.map
    });
            

    google.maps.event.addListener(marker1, "click", function(){
                
      $scope.number++;
      
      if($scope.infoWindow) $scope.infoWindow.close();
      
      $scope.infoWindow.open($scope.map, this);
      });

    google.maps.event.addListener(marker2, "click", function(){
      
      $scope.number++;
      console.log($scope.number);
      if($scope.infoWindow) $scope.infoWindow.close();
      
      $scope.infoWindow.open($scope.map, this);
    });
    
  });

<div id="map" class="has-header"></div>



<div ng-hide="true">
 <div id="infoWindow">
        {{number}}
    </div>
</div>

Answer 1

当您在 angular 上下文之外递增计数器 $scope.number 时，您可能需要触发 $scope.$apply(); 以反映范围的变化。

所以在你的 google.maps 事件处理程序中，在你递增计数器 $scope.number++ 之后，调用 $scope.$apply();

google.maps.event.addListener(marker1, "click", function(){

      $scope.number++;

      if($scope.infoWindow) $scope.infoWindow.close();

      $scope.infoWindow.open($scope.map, this);
      $scope.$apply();
});
google.maps.event.addListener(marker2, "click", function(){

  $scope.number++;
  console.log($scope.number);
  if($scope.infoWindow) $scope.infoWindow.close();

  $scope.infoWindow.open($scope.map, this);
  $scope.$apply();
});

另一个 hacky 选项是将 $scope.number++ 包裹在 $timeout 中。 $timeout 也会触发 $digest 循环。

带有 Angular JS 和 google 地图信息窗口的动态 HTML

Dynamic HTML with Angular JS and google maps infoWindow

angularjs

infowindow