5
Tôi mới vào góc và google maps.here tôi có 5 điểm đánh dấu, tôi muốn lọc các điểm đánh dấu đó bằng cách sử dụng giá trị thả xuống đó mà bất kỳ ai cũng có thể giúp tôi.Làm thế nào để lọc google map marker bằng cách sử dụng giá trị dropdown trong angularjs?
dụ: nếu tôi chọn Đây là thành phố tốt nhất trên thế giới trong danh sách thả xuống bản đồ nên chỉ hiển thị một điểm đánh dấu đó là Toronto
nếu tôi chọn thành phố này là sống trong bản đồ thả xuống sẽ hiển thị hai điểm đánh dấu đó là Los Angeles, Las Vegas
tôi đã thêm tôi demo
/Data
var cities = [
{
city : 'Toronto',
desc : 'This is the best city in the world!',
lat : 43.7000,
long : -79.4000
},
{
city : 'New York',
desc : 'This city is aiiiiite!',
lat : 40.6700,
long : -73.9400
},
{
city : 'Chicago',
desc : 'This is the second best city in the world!',
lat : 41.8819,
long : -87.6278
},
{
city : 'Los Angeles',
desc : 'This city is live!',
lat : 34.0500,
long : -118.2500
},
{
city : 'Las Vegas',
desc : 'This city is live!',
lat : 36.0800,
long : -115.1522
}
];
//Angular App Module and Controller
angular.module('mapsApp', [])
.controller('MapCtrl', function ($scope) {
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(40.0000, -98.0000),
mapTypeId: google.maps.MapTypeId.TERRAIN
}
$scope.map = new google.maps.Map(document.getElementById('map'), mapOptions);
$scope.markers = [];
var infoWindow = new google.maps.InfoWindow();
var createMarker = function (info){
var marker = new google.maps.Marker({
map: $scope.map,
position: new google.maps.LatLng(info.lat, info.long),
title: info.city
});
marker.content = '<div class="infoWindowContent">' + info.desc + '</div><div class="infoWindowContent">' + info.city + '</div>';
google.maps.event.addListener(marker, 'click', function(){
infoWindow.setContent('<h2>' + marker.title + '</h2>' + marker.content);
infoWindow.open($scope.map, marker);
});
$scope.markers.push(marker);
}
for (i = 0; i < cities.length; i++){
createMarker(cities[i]);
}
$scope.openInfoWindow = function(e, selectedMarker){
e.preventDefault();
google.maps.event.trigger(selectedMarker, 'click');
}
});#map {
height:420px;
width:600px;
}
.infoWindowContent {
font-size: 14px !important;
border-top: 1px solid #ccc;
padding-top: 10px;
}
h2 {
margin-bottom:0;
margin-top: 0;
}<div ng-app="mapsApp" ng-controller="MapCtrl">
<div id="map"></div>
\t <br><br>
\t <label>Filter Marker </label><br>
\t <select name="singleSelect" ng-model="data.singleSelect">
\t <option value="0">all</option>
<option value="This is the best city in the world!">This is the best city in the world!</option>
<option value="This city is aiiiiite">This city is aiiiiite</option>
\t <option value="This is the second best city in the world!">This is the second best city in the world!</option>
\t <option value="This city is live">This city is live</option>
\t
</select><br>
<div id="class" ng-repeat="marker in markers | orderBy : 'title'">
<a href="#" ng-click="openInfoWindow($event, marker)">{{marker.title}}</a>
</div>
</div>
cảm ơn vì đã giúp đỡ –