कोणीय-google-नक्शे: मार्कर

Question

मैं कोणीय-google-नक्शे उपयोग कर रहा हूँ पर गतिशील शीर्षक और वर्णन को दिखाने के लिए कैसे, HTML कोड इस प्रकार

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

JS में इस प्रकार

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

MapsMixinController बुला । जेएस कोड से इस नियंत्रक को बुलाओ। चिह्नित करने के लिए सक्षम क्लिक पर मार्कर & दिखा रहे हैं।

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

मैं मार्करों पर माउस हॉवर पर शीर्षक कैसे दिखा सकते हैं? और मार्कर पर विवरण दिखाने के तरीके पर क्लिक करें?

Answer 1

मार्कर डेटा बनाते समय आप अक्षांश और देशांतर संपत्ति के साथ अकेले शीर्षक संपत्ति जोड़ सकते हैं।

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