angular-google-maps: как получить текущую модель в маркерах ui-gmap

Question

Я пытаюсь загрузить значок для каждой отметки. значок каждого знака отличается.

У меня есть функция "getIcon", она будет нуждаться в UID из каждой модели привязки (item.Uid).

Если я передаю "this" getIcon, он не определен.

Кажется, нет никакой возможности найти текущую модель.

Мне придется использовать "ui-gmap-markers", а не "ui-gmap-marker"

Этот вариант работает действительно странно.

<ui-gmap-markers models="items" idkey="'Uid'"                     
                 options="{icon: getIcon(this, map.zoom)}"
                 coords="'self'" icon="'icon'">
</ui-gmap-markers>

Answer 1

В этом примере this относится к ui-gmap-markers директива изолировала область видимости, а свойство модели недоступно, поскольку принадлежит дочерней области.

Вы можете рассмотреть следующий подход, чтобы связать маркер значка на основе масштаба карты.

Во-первых, давайте представим массив иконок для каждого уровня масштабирования:

$scope.zoomIcons = {};
var althabet = "abcdefghijklmnopqrstuvwxyz".toUpperCase().split("");
var l = 0;
althabet.forEach(function(ch){
    $scope.zoomIcons[l] = 'http://www.google.com/mapfiles/marker' + ch + '.png';
    l++;
});

Тогда давайте уточним значок маркера, используя icon атрибут директивы:

<ui-gmap-markers models="items" idkey="'Uid'" coords="'self'" icon="'icon'">                 
</ui-gmap-markers>

где icon свойство вместе с другими свойствами будет инициализировано для каждого маркера (подробнее см. ниже)

И последний шаг - обновить значок маркера после изменения масштаба карты, как показано ниже:

$scope.$watch(function () { return $scope.map.zoom; }, function (newZoom, oldZoom) {
    if(newZoom != oldZoom){
        console.log('Zoom:' + newZoom + ':'  + oldZoom);  
        $scope.items.forEach(function(item){
          item.icon = $scope.getIcon(newZoom);    
        }); 
    }
}, true);  

Рабочий пример

var appMaps = angular.module('appMaps', ['uiGmapgoogle-maps']);
appMaps.controller('mainCtrl', function($scope) {
    $scope.map = {
        center: { latitude: 40.1451, longitude: -99.6680 },
        zoom: 4,
        options: { scrollwheel: false }
    };

    $scope.zoomIcons = {};
    var althabet = "abcdefghijklmnopqrstuvwxyz".toUpperCase().split("");
    var l = 0;
    althabet.forEach(function(ch){
        $scope.zoomIcons[l] = 'http://www.google.com/mapfiles/marker' + ch + '.png';
        l++;
    });

    var getRandomLat = function() {
        return Math.random() * (180.0) - 90.0;
    };
    var getRandomLng = function () {
        return Math.random() * (360.0) - 180.0;
    };  


    var createRandomMarker = function(i) {
        var item = {
            latitude: getRandomLat(),
            longitude: getRandomLng(),
            title: '#' + i,
            show: true,
            Uid: i,
            icon: $scope.getIcon($scope.map.zoom)
        };
        return item;
    };


    $scope.getIcon = function(zoom) {
        return { url: $scope.zoomIcons[zoom] };
    };
    
    $scope.items = [];
    for (var i = 0; i < 160; i++) {
        $scope.items.push(createRandomMarker(i));
    }
  
    
    $scope.$watch(function () { return $scope.map.zoom; }, function (newZoom, oldZoom) {
        if(newZoom != oldZoom){
            console.log('Zoom:' + newZoom + ':'  + oldZoom);  
            $scope.items.forEach(function(item){
              item.icon = $scope.getIcon(newZoom);    
            }); 
        }
    }, true);
});

html, body, #map_canvas {
    height: 100%;
    width: 100%;
    margin: 0px;
}

#map_canvas {
    position: relative;
}

.angular-google-map-container {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

<script src="https://code.angularjs.org/1.3.14/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
<script src="http://rawgit.com/angular-ui/angular-google-maps/2.0.X/dist/angular-google-maps.js"></script>
<div id="map_canvas" ng-app="appMaps" ng-controller="mainCtrl"> 
        <ui-gmap-google-map center="map.center" zoom="map.zoom"  options="map.options" events="map.events">
            <ui-gmap-markers models="items" idkey="'Uid'" 
                             coords="'self'" icon="'icon'" >                 
            </ui-gmap-markers>
        </ui-gmap-google-map>
</div>