Question

我是Angular的新手（所以我可能会犯一些愚蠢的错误）而且我正在尝试使用自定义图片图标向地图实例添加一些标记。

我知道执行此操作的最佳方法是将其添加到项目suggested by Fedaykin中，但如果您无法更改JSON文件，是否有办法执行此操作？

我能够为单个标记添加自定义图标，所以我想知道我是否可以使用＆＃39; forEach＆＃39;为几个标记做同样的事情，但是虽然这显示了我的所有标记，但它并没有。 t添加图标。

$scope.marker = Mapdata.query(function() {  

    var image = "https://maps.google.com/mapfiles/kml/shapes/info-i_maps.png";

    $scope.$watch('data', function(data) {
        angular.forEach($scope.marker, function(markerList, id, coords, icon) {
            $scope.markerList = [{

                id: data.id,
                coords: {
                    latitude: data.latitude,
                    longitude: data.longitude
                },

                icon: image

            }];
        });
    });

});

html只是通常的角度 - 谷歌地图的东西

 <ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true">
  <ui-gmap-markers models="marker.boards" coords="'self'" fit="'true'" icon="markerList.icon" click="'onClick'"></ui-gmap-markers>
</ui-gmap-google-map>

我有一个plunker here将它全部放在上下文中。

感谢您提供任何帮助或建议：）

Answer 1

做了一些改变：

<强>的index.html

icon="markerList.icon" - ＆gt; icon="'icon'"

<强>的script.js

我不太明白你用$ watch想要做什么 - 我最后只是在最初提取数据时设置每个标记的图像属性。

Mapdata.query(function() { - ＆gt; Mapdata.query(function(data) {

$scope.$watch东西 - ＆gt;

angular.forEach(data.boards, function(board) {
    board.icon = image;
});

Here's the updated plunker.

当标记来自外部JSON时，将自定义标记图标添加到angular-google-maps

1 个答案: