Question

我正在使用ng-map定位位置。它工作正常，但所有地图都用相同的图标表示。因此，我需要用不同的图标指出每个位置。如何实现这个过程？

我得到的输出带有相同的红色图标，并且启用了此输出屏幕截图

我需要这种带有不同图标的输出。请参阅下面的图片

如何获取这个不同的图标来表示angularjs ng-map中的位置

这是我的js前端代码

<body ng-controller="heatmapsCtrl as vm">
<ng-map style="height:500px;" zoom="15" center="[37.782551, -122.442815]"  map-type-id="TERRAIN">
        <marker icon="{{vm.getIcon(school)}}" ng-repeat="p in points" position="{{p}}" ></marker>
</ng-map>

这是我的控制器代码

var heatmap, vm = this;

vm.toggleHeatmap = function (event) {
    heatmap.setMap(heatmap.getMap() ? null : vm.map);
};
vm.changeGradient = function () {
    var gradient = [
        'rgba(0, 255, 255, 0)',
        'rgba(0, 255, 255, 1)',
        'rgba(0, 191, 255, 1)',
        'rgba(0, 127, 255, 1)',
        'rgba(0, 63, 255, 1)',
        'rgba(0, 0, 255, 1)',
        'rgba(0, 0, 223, 1)',
        'rgba(0, 0, 191, 1)',
        'rgba(0, 0, 159, 1)',
        'rgba(0, 0, 127, 1)',
        'rgba(63, 0, 91, 1)',
        'rgba(127, 0, 63, 1)',
        'rgba(191, 0, 31, 1)',
        'rgba(255, 0, 0, 1)'
    ]
    heatmap.set('gradient', heatmap.get('gradient') ? null : gradient);
}
vm.changeRadius = function () {
    heatmap.set('radius', heatmap.get('radius') ? null : 20);
}
vm.changeOpacity = function () {
    heatmap.set('opacity', heatmap.get('opacity') ? null : 0.2);
}

 $scope.points = [
["37.782551", "-122.445368"]
["37.782745", "-122.444586"]
["37.782842", "-122.443688"]
["37.782919", "-122.442815"]
["37.782992", "-122.442112"]
["37.783206", "-122.440829"]
["37.783273", "-122.440324"]
["37.783316", "-122.440023"]
["37.783357", "-122.439794"]
["37.783371", "-122.439687"]
["37.783368", "-122.439666"]
["37.783383", "-122.439594"]

];

如何使用ng-map位置为每个位置设置不同的图标

0 个答案: