3

我正在使用 angularjs-google-map http://angular-ui.github.io/angular-google-maps/#!/api

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

您可以在 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 = [];

 };

});

Like you see on my JS code I have created markerEvents and I can get the marker label changed on mouse events but still not showing the infoWindow attached to each marker on the map when the mouse Event is fired, despite its value is changing and take the correct value.

Someone Have an idea to resolve this issue ? Feel free to put your changes to my Jsfiddle code :)

4

2 回答 2

4

You must set model.showWindow instead of marker.showWindow

于 2015-03-02T12:43:24.313 回答
0

You can set model.show = true instead of model.showWindow, in html remove show =showWindow.

于 2016-01-06T08:35:56.563 回答