Question

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

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

似乎指令参数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处理双向绑定。

长话短说：

这是一个范围变量'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

如何更改angularGM中的标记选项

2 个答案: