如何更改angularGM中的标记选项

Question

我正在使用 http://angulargm.herokuapp.com/documentation/angulargm-0.3.1/api/angulargm.directive:gmMarkers 指令制作带有 angularjs 标记的谷歌地图。

我希望能够在初始设置后更改 markerOptions 或以某种方式从外部获取 google 标记对象，因此单击按钮我可以为其设置动画、更改图标等。

似乎指令参数gm-get-marker-options 仅用于标记的初始创建，因为如果我更改选项，它对标记没有任何影响。

到目前为止我唯一的解决方案是使用指令参数gm-events 来模拟对所需标记位置的单击，然后在侦听器函数中使用标记对象来更改标记外观，但这是有问题的，因为我可以有多个具有相同坐标的标记。

也许我错过了什么？

---

这现在可以在新的 angular-gm 版本 1.0.0 中实现。请参阅有关如何指定标记 ID 并使用它们的文档。 http://dylanfprice.github.io/angular-gm/1.0.0/docs/#/api/angulargm.directive:gmMarkers

Answer 1

到目前为止我唯一的解决方案是使用指令参数 gm-events 来模拟对所需标记位置的单击，然后在侦听器函数中使用标记对象来更改标记外观，但这是有问题的，因为我可以有多个具有相同坐标的标记。

也许我错过了什么？

不，你没有遗漏任何东西，这是当前版本的 AngularGM 中的一个设计缺陷，因为它使用位置作为对象/标记的单一识别信息。 markers-by-id 分支将解决这个问题，希望我能尽快登陆。

正如不确定所说，如果您更改其中一个对象，则更新标记的方法是通过 $scope.$broadcast('gmMarkersRedraw', 'myObjects') 强制重绘。

Answer 2

更改标记非常容易。由于 Angular 插件迭代了一些标记列表，并且您应该使用范围变量 Angular 处理两种方式的绑定。

长话短说：

这是一个范围变量“map_markers”，它是一个显示标记的列表。 一个函数“getPinImage”，它返回一个谷歌地图图标。 当您点击地图上的标记时触发的功能；它会改变点击标记的颜色。

$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”的事件，您可以这样收听：

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

然而，通常不需要监听这些事件，但如果你真的需要手动移除和重绘你的标记，你可以广播这个事件并像这样强制它：

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

Get Some Example Code here