如何根据类别为 ng-map 标记着色答案

【问题标题】：How to colorize ng-map markers based on categories如何根据类别为 ng-map 标记着色
【发布时间】：2017-04-23 10:28:45
【问题描述】：

我有这个功能，可以根据您的位置和选定的半径渲染靠近海湾的位置。那些靠近海湾的位置有不同的类别，现在我不想根据这些类别为标记着色。

这是我当前的代码，因此显示数据

$scope.radius = 10;
nearBaysFactory.getNearBayInRadius(data.basicData[0].latitude, data.basicData[0].longitude, $scope.radius).then(function (data) {
    $scope.nearNearBays = data.nearBays;
    NgMap.getMap().then(function(map) {
    });
});

$scope.showSites = function (evt, id) {
    angular.forEach($scope.nearNearBays, function(value){
        if (value.id_near_bay == id) {
            $scope.selectedSite =
                value.name + "<br>" +
                value.address + "<br>" +
                "Category: " + value.category;
        }
    });
    $scope.showInfoWindow.apply(this, [evt, 'bar-info-window']);
};

我的html

<ng-map id="custom" default-style="false"
        center="46.1478781,14.4326283" zoom="9">
    <!-- this marker should be red as it is by default -->
    <marker position="{{location.basicData[0].latitude}},{{location.basicData[0].longitude}}" id="{{$index}}"
            on-click="showSites(event, n.id_location)">
    </marker>
    <!-- Those markers should be different colors based on near bay category -->
    <marker ng-repeat="n in nearNearBays" position="{{n.latitude}},{{n.longitude}}" id="{{$index}}"
            on-click="showSites(event, n.id_near_bay)" color="blue">
    </marker>
    <info-window id="bar-info-window">
        <div ng-non-bindable>
            <div id="siteNotice"></div>
            <h1 id="firstHeading" class="firstHeading" style="font-size: 17px;">
                <div ng-bind-html="selectedSite"></div>
            </h1>
            <div id="bodyContent">
                <p>
                    <a href="/#/nearbays/nearbay/{{selectedSite.id_near_bay}}">Open near bay</a>
                </p>
            </div>
        </div>
    </info-window>
</ng-map>

这是当前结果

这是一个近海湾物体的例子

$scope.test = [
    {
        name: 'name 1',
        address: 'Address 1',
        id_resort_category: '8',
        category : 'Towing service'
    },
    {
        name: 'name 2',
        address: 'Address 2',
        id_resort_category: '1',
        category : 'Spa'
    }
];

所以我正在搜索的是一些建议，实施方式，如何实现根据他的类别将那些靠近海湾的标记呈现不同的颜色。如果您需要任何其他信息，请告诉我，我会提供。谢谢

【问题讨论】：

标签： javascript angularjs google-maps google-maps-api-3

【解决方案1】：

在您的代码中，您可以使用条件语句在标记上设置icon 属性。

你可以找到不同的图标here

【讨论】：

【解决方案2】：

所以我是这样做的... 我添加了图标 url 或一些绝对路径

$scope.test = [
    {
        name: 'name 1',
        address: 'Address 1',
        id_resort_category: '8',
        category : 'Towing service'
        img: 'http://www.iconarchive.com/download/i2262/aha-soft/food/hamburger.ico'
    },
    {
        name: 'name 2',
        address: 'Address 2',
        id_resort_category: '1',
        category : 'Spa',
        img: 'http://www.iconarchive.com/download/i2262/aha-soft/food/hamburger.ico'
    }
];

然后你可以设置marker ico位置就我而言，它看起来像这样

<marker ng-repeat="n in nearNearBays" position="{{n.latitude}},{{n.longitude}}" icon="dist/img/googleMapsIcons/{{n.image}}">
</marker>

【讨论】：