góc-google-map: Làm thế nào để hiển thị Tiêu đề và mô tả động trên mốc

Question

Tôi đang sử dụng góc-google-bản đồ, HTML đang sau

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

trong JS gọi

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

MapsMixinController như sau . Gọi bộ điều khiển này từ mã js. Điểm đánh dấu đang hiển thị & khi nhấp có thể đánh dấu.

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

Làm thế nào tôi có thể hiển thị tiêu đề trên di chuột vào dấu? Và khi nhấp vào cách hiển thị mô tả trên các điểm đánh dấu?

Answer 1

Bạn có thể thêm thuộc tính tiêu đề một mình với thuộc tính vĩ độ và kinh độ trong khi tạo dữ liệu điểm đánh dấu.

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