根据 ng-repeat 变量的值设置不同的地图标记图标
Setting different map marker icons based on value of ng-repeat variable
我正在尝试使用 ng-map 中的 ng-repeat 将地图标记动态添加到地图,如下所示,
<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 在地图上渲染标记时,我无法弄清楚如何根据评分值更改标记图标 url。
目前,我正在执行以下操作,但我认为这是一种低效的方法。
<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>
在这里,我放置了多个标记指令,每个指令都有 ng-repeat 但使用 ng-if 的条件不同
我想知道是否有更有效的方法使用单个标记指令和 ng-repeat
您可以引入一个功能来显示每个项目(学校评级)的标记图标,如下所示。
工作示例
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>
我正在尝试使用 ng-map 中的 ng-repeat 将地图标记动态添加到地图,如下所示,
<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 在地图上渲染标记时,我无法弄清楚如何根据评分值更改标记图标 url。
目前,我正在执行以下操作,但我认为这是一种低效的方法。
<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>
在这里,我放置了多个标记指令,每个指令都有 ng-repeat 但使用 ng-if 的条件不同
我想知道是否有更有效的方法使用单个标记指令和 ng-repeat
您可以引入一个功能来显示每个项目(学校评级)的标记图标,如下所示。
工作示例
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>