Question

Я пытаюсь добавить маркеры на карте динамически на карте, используя нг-повторение внутри нг-карты следующим образом,

<div id="map-canvas"> 
    <ng-map default-style="true"> 
     <marker id='ID{{school.id}}' ng-repeat="school in vm.schools" position="{{school.location}}" on-click="vm.showDetail(school)" icon="assets/img/marker-excellent.png"> 
     </marker> 

     <info-window id="marker-info"> 
      <div ng-non-bindable=""> 
       <h5>{{vm.school.name}}</h5> 
      </div> 
     </info-window> 
    </ng-map> 
</div> 

Вот это создает несколько маркеров с тем же значком маркера. Я хочу использовать разные значки маркеров на основе значения {{school.rating}}. Однако я не могу понять, как изменить значок значка маркера на основе значения рейтинга, в то время как ng-repeat в действии отображает маркеры на карте.

В настоящее время я делаю следующее, но я считаю, что это неэффективный метод его выполнения.

<div id="map-canvas"> 
    <ng-map default-style="true"> 
     <marker id='ID{{school.id}}' ng-if="school.overallRating >= 4.5" ng-repeat="school in filteredSchools = (search.schools | filter:boardsFilter)" position="{{school.location}}" on-click="search.showDetail(school)" icon="assets/img/marker-excellent.png"> 
     </marker> 

     <marker id='ID{{school.id}}' ng-if="school.overallRating < 4.5 && school.overallRating >= 3.5" ng-repeat="school in filteredSchools = (search.schools | filter:boardsFilter)" position="{{school.location}}" on-click="search.showDetail(school)" icon="assets/img/marker-good.png"> 
     </marker> 

     <marker id='ID{{school.id}}' ng-if="school.overallRating < 3.5 && school.overallRating >= 2.0" ng-repeat="school in filteredSchools = (search.schools | filter:boardsFilter)" position="{{school.location}}" on-click="search.showDetail(school)" icon="assets/img/marker-average.png"> 
     </marker> 

     <info-window id="marker-info"> 
      <div ng-non-bindable=""> 
       <h5>{{vm.school.name}}</h5> 
      </div> 
     </info-window> 
    </ng-map> 
</div> 

Здесь я поставил несколько директив Marker каждый из которых имеет нг-повтор, но разные условия использования нг-если

мне интересно, если есть более эффективный способ сделать это с помощью одной директивы маркера с ng-repeat

Answer 1

Вы можете ввести функцию для отображения значка маркера на предмет (школьный рейтинг), как показано ниже.

Рабочий пример

var app = angular.module('appMaps', ['ngMap']); 
 
app.controller('mapCtrl', function() { 
 
    var vm = this; 
 

 

 
    vm.schools = [ 
 
     { id: 1, name : "Brisbane", location: [-33.867396, 151.206854], overallRating: 3.2 }, 
 
     { id: 2, name: "Sydney", location: [-27.46758, 153.027892], overallRating: 4.6 }, 
 
     { id: 3, name: "Perth", location: [-31.953159, 115.849915], overallRating: 3.5 } 
 
    ]; 
 

 

 
    vm.getIcon = function (school) { 
 
     var iconsTable = { 
 
      2: "http://google.com/mapfiles/ms/micons/green.png", 
 
      3: "http://google.com/mapfiles/ms/micons/yellow.png", 
 
      4: "http://google.com/mapfiles/ms/micons/orange.png", 
 
      5: "http://google.com/mapfiles/ms/micons/red.png", 
 
     } 
 

 
     var iconUrl = iconsTable[Math.round(school.overallRating)] 
 
     if (iconUrl) 
 
      return iconUrl; 
 
     return "http://google.com/mapfiles/ms/micons/blue.png"; 
 
    }; 
 

 
});

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> 
 
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script> 
 
<div ng-app="appMaps" ng-controller="mapCtrl as vm"> 
 
     <map center="[-24.667856, 133.630694]" zoom="4"> 
 
      <marker id='ID{{school.id}}' ng-repeat="school in vm.schools" position="{{school.location}}" icon="{{vm.getIcon(school)}}" > 
 
      </marker> 
 
      
 
     </map> 
 
</div>

JSFiddle