角谷歌，地图不显示信息窗口上的鼠标悬停事件

问题描述：

我使用angularjs - 谷歌地图http://angular-ui.github.io/angular-google-maps/#!/api 角谷歌，地图不显示信息窗口上的鼠标悬停事件

我可以添加多个标记物表示cliking上标记的信息窗口，但现在我需要显示标记信息窗口当鼠标进入标记图标区域并在鼠标离开标记图标区域而不是使用单击事件时将其隐藏。

你可以看看Jsfiddle https://jsfiddle.net/meher12/bgb36q7b/上的这个例子，以了解我的目的！

我的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 = []; 

}; 

});

就像你对我的JS代码中看到我已创建markerEvents，我可以得到的标识标签上的鼠标事件，但仍然改变当鼠标事件被触发时，不会显示附加到地图上每个标记的infoWindow，尽管它的值正在改变并采取正确的值。

有人有想法解决这个问题吗？随意把你改变我的jsfiddle代码:)

我必须缺少一些东西......你的代码在哪里打开InfoWindows？我看到的只有你设置'marker.showWindow = true;'。也许我不明白Angular，但是不是有一些代码正在检查'showWindow'吗？ – duncan 2015-03-02 09:30:54

是的，如果你对AngularJS的理解不太好，你会受到限制来检测问题。不过，我刚刚找到了解决方案，并且按照我的意愿工作，我还添加了对jsFiddle代码的更改，我发布了https://jsfiddle.net/meher12/bgb36q7b/30/ 感谢您的支持。 – MeherHedhli 2015-03-02 13:06:35

@MeherHedhli感谢您强调这一点，我正在实施相同的，但想知道如果你想添加一个标记没有删除旧的，我试着推新项目的数组，但变化不反映在地图上！ – 2015-07-26 18:22:54

答

您必须设置的model.showWindow代替marker.showWindow

是的，这就是我不得不做的，我发布我的问题后发现它，现在通过设置model.showWindow而不是marker.showWindow。谢谢：） – MeherHedhli 2015-03-02 13:11:43

答

您可以设置，而不是model.showWindow，在HTML中删除show =showWindow。

角谷歌，地图不显示信息窗口上的鼠标悬停事件

相关推荐