angolari-google-maps: Come mostrare Titolo e Descrizione dinamicamente sui marcatori

Question

sto usando angolare google-maps, HTML codice segue

<ui-gmap-google-map center='mapData.map.center' zoom='mapData.map.zoom' 
    events="mapEvents"> 
    <ui-gmap-markers models="mapData.map.markers" coords="'self'"> 
    </ui-gmap-markers> 
    </ui-gmap-google-map> 

in JS chiamando

angular.extend(this, $controller('MapsMixinController', 
{$scope:$scope, map:mapData.data[0].map})); 

MapsMixinController come segue . Chiamando questo controller dal codice js. I marker mostrano & a clic in grado di contrassegnare.

MapsMixinController.js

/** 
* Controller providing common behaviour for the other map controllers 
*/ 
angular 
    .module('app') 
    .controller('MapsMixinController', ['$scope', 'GeolocationService', 'uiGmapGoogleMapApi', 'map', 
     function($scope, GeolocationService, GoogleMapApi, map) { 
      var _this = this; 

      $scope.mapEvents = { 
       click: function(mapModel, eventName, originalEventArgs) { 
        var e = originalEventArgs[0]; 
        if (e.latLng) { 
         $scope.mapData.map.markers.push({ 
          id: new Date().getTime(), 
          latitude: e.latLng.lat(), 
          longitude: e.latLng.lng() 
         }); 
         // This event is outside angular boundary, hence we need to call $apply here 
         $scope.$apply(); 
        } 
       } 
      }; 

      // Returns a default map based on the position sent as parameter 
      this.getDefaultMap = function(position) { 
       return { 
        markers: [], 
        center: { 
         latitude: position.coords.latitude, 
         longitude: position.coords.longitude 
        }, 
        zoom: 14 
       }; 
      }; 

      // Initialize the google maps api and configure the map 
      GoogleMapApi.then(function() { 
       GeolocationService().then(function(position) { 
        $scope.mapData.map = map || _this.getDefaultMap(position); 
       }, function() { 
        $scope.error = "Unable to set map data"; // TODO use translate 
       }); 
      }); 
     } 
    ]); 

Come posso mostrare il titolo sul passaggio del mouse sui marcatori? E al clic su come mostrare la descrizione sui marcatori?

Answer 1

È possibile aggiungere la proprietà titolo con le proprietà di latitudine e longitudine durante la creazione dei dati del marker.

/** 
* Controller providing common behaviour for the other map controllers 
*/ 
angular 
    .module('app') 
    .controller('MapsMixinController', ['$scope', 'GeolocationService', 'uiGmapGoogleMapApi', 'map', 
     function($scope, GeolocationService, GoogleMapApi, map) { 
      var _this = this; 

      $scope.mapEvents = { 
       click: function(mapModel, eventName, originalEventArgs) { 
        var e = originalEventArgs[0]; 
        if (e.latLng) { 
         $scope.mapData.map.markers.push({ 
          id: new Date().getTime(), 
          latitude: e.latLng.lat(), 
          longitude: e.latLng.lng(), 
          title: "Mouse over text" 
         }); 
         // This event is outside angular boundary, hence we need to call $apply here 
         $scope.$apply(); 
        } 
       } 
      }; 

      // Returns a default map based on the position sent as parameter 
      this.getDefaultMap = function(position) { 
       return { 
        markers: [], 
        center: { 
         latitude: position.coords.latitude, 
         longitude: position.coords.longitude 
        }, 
        zoom: 14 
       }; 
      }; 

      // Initialize the google maps api and configure the map 
      GoogleMapApi.then(function() { 
       GeolocationService().then(function(position) { 
        $scope.mapData.map = map || _this.getDefaultMap(position); 
       }, function() { 
        $scope.error = "Unable to set map data"; // TODO use translate 
       }); 
      }); 
     } 
    ]);