kątowe-google-maps: Jak pokazać tytuł i opis dynamicznie markerów

Question

używam skośnych google-mapy, kod HTML następująco

<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> 

w JS nazywając

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

MapsMixinController następująco . Wywołanie tego kontrolera z kodu js. Markery pokazują & po kliknięciu, które można zaznaczyć.

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 
       }); 
      }); 
     } 
    ]); 

Jak mogę pokazać tytuł na najechaniu myszki na markery? I kliknij, jak wyświetlić opis na znacznikach?

Answer 1

Możesz samodzielnie dodać własność tytułu z właściwością szerokości i długości geograficznej podczas tworzenia danych znacznika.

/** 
* 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 
       }); 
      }); 
     } 
    ]);