javascript - Angular-google-maps:如何在标记上动态显示标题和描述

Question

我正在使用 Angular-google-maps，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 如下。从 js 代码调用此 Controller 。标记正在显示，点击即可标记。

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