Как изменить параметр маркера в angularGM

Question

Я использую директиву http://angulargm.herokuapp.com/documentation/angulargm-0.3.1/api/angulargm.directive:gmMarkers, чтобы сделать карту google с маркерами с угловыми.

Я хочу, чтобы иметь возможность изменять markerOptions после их первоначального набора или каким-то образом получить объект google-объекта извне, поэтому при нажатии кнопки я могу установить анимацию на него, изменить значок и т. Д. '.

Кажется, что параметр директивы gm-get-marker-options используется только при первоначальном создании маркера, потому что, если я изменю параметры, это не оказывает никакого влияния на маркеры.

Единственное решение, которое я до сих пор использую, заключается в использовании параметра директивы gm-events для имитации щелчка по нужному местоположению маркера, а затем использовать объект-маркер в функции прослушивателя, чтобы изменить внешний вид маркера, но это проблематично, поскольку я мог имеют более одного маркера с одинаковыми координатами.

Возможно, мне что-то не хватает?

---

Это возможно в новой версии углового-гм 1.0.0. См. Документацию о том, как указать идентификаторы маркеров и использовать их. http://dylanfprice.github.io/angular-gm/1.0.0/docs/#/api/angulargm.directive:gmMarkers

Answer 1

Единственное решение, которое я до сих пор является использование параметров директивы GM-события для имитации нажмите на нужном месте маркера, а затем использовать объект маркера в слушателя, чтобы изменить внешний вид маркера, но это проблематично, поскольку я мог бы иметь более одного маркера с одинаковыми координатами.

Возможно, мне что-то не хватает?

Нет, вы ничего не пропустили, это недостаток дизайна в текущей версии AngularGM, поскольку он использует местоположение как единую идентификационную информацию для объекта/маркера.Филиал markers-by-id рассмотрит эту проблему, и я надеюсь, что скоро приземлюсь.

Как не сказано, способ обновить маркеры, если вы измените один из ваших объектов, - это заставить перерисовать через $scope.$broadcast('gmMarkersRedraw', 'myObjects').

Answer 2

довольно легко изменить маркеры. Поскольку угловой плагин выполняет итерацию по некоторому списку маркеров, и поскольку вы должны использовать переменную с переменной угловой обработкой двухсторонних привязок.

Короче говоря:

Вот область применения переменного «map_markers», который представляет собой список отображаемых маркеров. Функция 'getPinImage', которая возвращает значок google maps. И функция, которая срабатывает при нажатии маркера на карте; он изменяет цвет маркера с кликом.

$scope.map_markers = [ 
    { 
     title: 'Marker one', 
     location: { 
      lat: 47.1212, 
      lng: 10.3434 
     } 
    }, 
    { 
     title: 'Marker two', 
     location: { 
      lat: 57.1212, 
      lng: 20.3434 
     } 
    } 
]; 

$scope.getPinImage = function(color) { 
    // helper which returns a valid google maps marker image in 
    // the given color 
    color = color || '4EB1E8'; 
    var icon_api = "http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|"; 
    return new google.maps.MarkerImage(
     icon_api + color, 
     new google.maps.Size(21, 34), 
     new google.maps.Point(0, 0), 
     new google.maps.Point(10, 34)); 
}; 

$scope.triggerMe = function(object, marker, map) { 
    // is executed on click, when clicking on a single marker on the map 
    // changes the color of the selected marker and resets a prev clicked marker 

    console.log('Click ', object, marker, map) 

    if ($scope.prev_selected_marker) { 
     $scope.prev_selected_marker.setOptions({icon: $scope.getPinImage()}); 
    } 
    $scope.prev_selected_marker = marker; 
    marker.setOptions({icon: $scope.getPinImage('FFFF00')}); 

}; 

HTML код:

<gm-map gm-map-id="myMap"> 
    <gm-markers gm-objects="map_markers" 
     gm-get-lat-lng="{ lat: object.location.lat, lng: object.location.lng }" 
     gm-get-marker-options="{ icon: object.icon }" 
     gm-on-click="triggerMe(object, marker, marker.getMap());"> 
    </gm-markers> 
</gm-map> 

Чтобы получить немного глубже: Когда объект маркер редактируется ПОСЛЕ вашего первоначального создания мероприятие под названием «gmMarkersUpdated» является triggerd, который вы могли бы слушать это нравится:

$scope.$on('gmMarkersUpdated', function(event, objects) { 
    if (objects === 'myObjects') { 
     ... 
    } 
}); 

Однако часто не требуется для прослушивания этих событий, но если вам действительно нужно вручную удалить и перерисовывать свои маркеры можно транслировать это событие и заставить его как это:

$scope.$broadcast('gmMarkersRedraw', 'myObjects'); 

Get Some Example Code here