Angularjs 角度谷歌地图在鼠标悬停事件中不显示信息窗口

我正在使用angularjs谷歌地图

我可以通过点击一个标记添加多个标记，显示信息窗口，但现在我需要在鼠标进入标记图标区域时显示标记信息窗口，并在鼠标离开标记图标区域时隐藏它，而不是使用单击事件

您可以在JSFIDLE上查看这个示例，了解我的目的

我的HTML代码：

    <ui-gmap-google-map center="map.center" zoom="map.zoom"  dragging="map.dragging" bounds="map.bounds"
                events="map.events"  options="map.options" pan="true" control="map.control">    


            <ui-gmap-markers models="map.randomMarkers" coords="'self'" icon="'icon'"
                doCluster="map.doClusterRandomMarkers" clusterOptions="map.clusterOptions" modelsbyref="true"
                events="map.markersEvents" options="'options'"
                >


                <ui-gmap-windows show="'showWindow'" ng-cloak>
                <div>
                    <p>This is an info window</p>
                </div>
            </ui-gmap-windows>


            </ui-gmap-markers>      

        </ui-gmap-google-map>


  </div>

这是一个信息窗口

我的JS代码：

myApp.controller('MainController', function ($scope,uiGmapGoogleMapApi) {

    $scope.numOfMarkers = 25;
uiGmapGoogleMapApi.then(function(maps) { $scope.googleVersion = maps.version; });



    $scope.map = {
        center: {
            latitude: 45,
            longitude: -73
        },
        zoom: 10,
        options: {
            streetViewControl: false,
            panControl: false,
            maxZoom: 20,
            minZoom: 3
        },
        dragging: false,
        bounds: {},

        randomMarkers: [],
        doClusterRandomMarkers: true,
        currentClusterType: 'standard',
        clusterOptions: {
            title: 'Hi I am a Cluster!', gridSize: 60, ignoreHidden: true, minimumClusterSize: 2
        }

    };

     $scope.map.markersEvents = {
        mouseover: function (marker, eventName, model, args) {
          model.options.labelContent = "Position - lat: " + model.latitude + " lon: " + model.longitude;
          marker.showWindow = true;
          $scope.$apply();
        },
        mouseout: function (marker, eventName, model, args) {
           model.options.labelContent = " ";
           marker.showWindow = false;
           $scope.$apply();
        }
    };


    var genRandomMarkers = function (numberOfMarkers, scope) {
        var markers = [];
        for (var i = 0; i < numberOfMarkers; i++) {
          markers.push(createRandomMarker(i, scope.map.bounds))
      }
      scope.map.randomMarkers = markers;
  };

     var createRandomMarker = function (i, bounds, idKey) {
     var lat_min = bounds.southwest.latitude,
  lat_range = bounds.northeast.latitude - lat_min,
  lng_min = bounds.southwest.longitude,
  lng_range = bounds.northeast.longitude - lng_min;

if (idKey == null)
  idKey = "id";

var latitude = lat_min + (Math.random() * lat_range);
var longitude = lng_min + (Math.random() * lng_range);
var ret = {
  latitude: latitude,
  longitude: longitude,
  title: 'm' + i,
  showWindow: false,
  options: {
        labelContent: ' ',
        labelAnchor: "22 0",
        labelClass: "marker-labels",
        draggable: true
      }
};
ret[idKey] = i;
return ret;
};


   $scope.genRandomMarkers = function (numberOfMarkers) {
      genRandomMarkers(numberOfMarkers, $scope);
  };
   $scope.removeMarkers = function () {

    $scope.map.randomMarkers = [];

 };

});

myApp.controller（'MainController'，函数（$scope，uiGmapGoogleMapApi）{
$scope.numOfMarkers=25；
然后（函数（映射）{$scope.googleVersion=maps.version；}）；
$scope.map={
中心：{
纬度：45，
经度：-73
},
缩放：10，
选项：{
街景控制：错误，
泛控制：错误，
maxZoom:20，
最小缩放：3
},
拖动：false，
界限：{}，
随机标记：[]，
DoclusterAndMarkers：对，
currentClusterType:“标准”，
俱乐部选项：{
标题：“嗨，我是一个集群！”，gridSize:60，ignoreHidden:true，minimumClusterSize:2
}
};
$scope.map.markersEvents={
mouseover:函数（标记、事件名、模型、参数）{
model.options.labelContent=“Position-lat:”+model.lation+“lon:”+model.longitude；
marker.showWindow=true；
$scope.$apply（）；
},
mouseout：函数（标记、事件名、模型、参数）{
model.options.labelContent=“”；
marker.showWindow=false；
$scope.$apply（）；
}
};
var genRandomMarkers=函数（numberOfMarkers，范围）{
var标记=[]；
对于（变量i=0；i

正如你在我的JS代码中看到的那样，我已经创建了markerEvents，我可以在鼠标事件上更改标记标签，但是当鼠标事件被触发时，仍然没有显示地图上每个标记所附加的信息窗口，尽管它的值正在更改，并采用正确的值

有人有办法解决这个问题吗？

---

您可以随意更改我的JSFIDLE代码：）

您必须设置

模型。showWindow

而不是

标记。showWindow

您可以设置

model.show=true

而不是

model.showWindow

，在html中删除

show=showWindow

我一定缺少什么。。。您在代码中的何处打开信息窗口？我看到的只是你设置了

marker.showWindow=true。也许我不理解AngularJS，但是是否有一些代码正在检查
showWindow
？是的，如果您不理解AngularJS，您将有一些约束来检测问题。但是，我刚刚找到了解决方案，它可以按照我的要求工作，我还对我发布的JSFIDLE代码添加了更改，感谢您的支持。@MeherHedhli感谢您强调这一点，我正在实现相同的解决方案，但我想知道您是否希望添加一个标记而不删除旧的标记，我尝试将新项目推送到阵列中，但更改不会反映在地图上！！是的，这就是我必须做的，我在发布我的问题后检测到它，它现在通过设置model.showWindow而不是marker.showWindow工作。谢谢:)