Я пытаюсь использовать флажки в угловом контроллере, чтобы показать некоторые места на Google Maps v3, но когда я нажимаю флажки, они не работают. Похоже, что проблема заключается в onclick, и функция executeSearch не может быть выполнена. Я новичок в angularjs, поэтому я не уверен, как изменить код в угловом методе. Что делать, чтобы сделать флажки эффективными? Любая помощь приветствуется. Заранее спасибо !
Вот чего я хочу достичь, но код работает только тогда, когда он не находится в угловом контроллере.
http://jsfiddle.net/wsc358203708/rn92mkkn/15/
Вот часть кода, который я пробовал в угловом контроллере.
var infowindow;
var service;
var transportMap;
var markersArray = [];
var options = ['train_station', 'bus_station', 'subway_station', 'transit_station', 'airport',
'grocery_or_supermarket', 'hospital', 'movie_theater', 'restaurant', 'shopping_center', 'park', 'night_club', 'pharmacy', 'police', 'embassy', 'shopping_mall'
];
$(document).ready(function() {
initializeTransportMap();
});
function getLetteredIcon (letter) {
return "http://www.google.com/mapfiles/marker" + letter + ".png";
}
function initializeTransportMap() {
var transportLatLng = {
lat: $scope.result[1].data[0].Latitude,
lng: $scope.result[1].data[0].Longitude
};
transportMap = new google.maps.Map(document.getElementById('transportMap'), {
center: transportLatLng,
scrollwheel: false,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP,
// mapTypeId: google.maps.MapTypeId.HYBRID,
mapTypeControl: true,
disableDefaultUI: false,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.RIGHT_BOTTOM
}
});
infowindow = new google.maps.InfoWindow();
service = new google.maps.places.PlacesService(transportMap);
var defaultMarker = 'http://maps.google.com/mapfiles/kml/shapes/ranger_station.png';
var marker = new google.maps.Marker({
position: transportLatLng,
map: transportMap,
icon: defaultMarker,
title: 'Hello World!'
});
google.maps.event.addListenerOnce(transportMap, 'bounds_changed', function() {
$scope.performSearch
});
for (var i = 0; i < options.length; i++) {
document.getElementById('options').innerHTML += '<input type="checkbox" id="' + options[i] + '" ng-click="performSearch()"> <img src=' + getLetteredIcon(String.fromCharCode('A'.charCodeAt(0) + i)) + ' height="20" /> ' + options[i] + '<br>';
}
}
$scope.performSearch = function() {
clearMaps();
var clickedOptions = [];
for (var i = 0; i < options.length; i++) {
if (document.getElementById(options[i]).checked) {
performTypeSearch(options[i], getLetteredIcon(String.fromCharCode('A'.charCodeAt(0) + i)));
}
}
}
$scope.performTypeSearch = function(type, icon) {
var request = {
// bounds: transportMap.getBounds(),
location: transportLatLng,
radius: 5000,
types: [type]
};
service.radarSearch(request, function(results, status) {
if (status != google.maps.places.PlacesServiceStatus.OK) {
alert(type + ":" + status);
return;
}
for (var i = 0, result; result = results[i]; i++) {
createMarker(result, icon);
}
});
}
$scope.createMarker = function(place, icon) {
var marker = new google.maps.Marker({
map: transportMap,
position: place.geometry.location,
icon: icon
});
markersArray.push(marker);
google.maps.event.addListener(marker, 'click', function() {
service.getDetails(place, function(result, status) {
if (status != google.maps.places.PlacesServiceStatus.OK) {
alert(status);
return;
}
infoWindow.setContent(result.name);
infoWindow.open(transportMap, marker);
});
});
}
$scope.clearMaps = function() {
for (var i = 0; i < markersArray.length; i++) {
markersArray[i].setMap(null);
}
markersArray.length = 0;
}
В контроллере angularjs вы действительно не используете document.getElementById, но можете использовать
ng-model = "name" ($ scope.name), чтобы проверить, установлен ли ваш флажок.
Прежде всего это документация: ngChecked
Таким образом, используйте
<input type="checkbox" ng-model="options.train_station" ng-change='performSearch()'>
а затем вы можете зацикливать их ($ scope.options) в performSearch(), таким образом ваш код также будет работать с addListenerOnce().
В performSearch() вы можете проверить значения
angular.forEach($scope.options, function(value, key) {
console.log(key + ': ' + value);
});
даст вам что-то вроде
train_station: true
bus_station: false