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

Question

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

我知道最好的方法是将其作为添加到项目中，但是如果您不能更改 JSON 文件，有没有办法做到这一点？

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

$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 只是通常的 angular-google-地图内容

 <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" --> icon="'icon'"

script.js

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

Mapdata.query(function() { --> Mapdata.query(function(data) {

$scope.$watch 东西 -->

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

Here's the updated plunker.

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

Add custom marker icon to angular-google-maps when markers are from external JSON

icons

markers

angularjs

angular-google-maps