角谷歌，地圖不顯示信息窗口上的鼠標懸停事件

我使用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代碼:)

來源

2015-03-02 MeherHedhli

我必須缺少一些東西......你的代碼在哪裏打開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

來源

2015-03-02 12:43:24

是的，這就是我不得不做的，我發佈我的問題後發現它，現在通過設置model.showWindow而不是marker.showWindow。謝謝：） – MeherHedhli 2015-03-02 13:11:43

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

來源

2016-01-06 08:35:56 flysic

角谷歌，地圖不顯示信息窗口上的鼠標懸停事件

回答

相關問題