0
Ich habe Probleme mit der Google Maps-API und benutze angular, und ich habe ein Problem, die Daten von der API an eine Variable zu binden und korrekt mit einem ng- wiederholen. Der ng-repeat soll die name-Eigenschaft der place-Objekte auflisten, tut dies aber nicht, solange ich nicht dieselbe Postleitzahl zweimal eingebe. Hier ist die html:ng-repeat funktioniert erst, nachdem der submit-Button zweimal gedrückt wurde
<!DOCTYPE html>
<html ng-app = "openApp">
<head>
<meta charset="utf-8">
<title>Open Sesame</title>
<script src = "http://maps.googleapis.com/maps/api/js? key=AIzaSyArO1n-5w8xxPblR_aDxV6Ul1VLik3_pRY&libraries=places"></script>
<script src = "vendors/angular/angular.min.js"></script>
<script src = "assets/scripts/composite.all.min.js"></script>
<link rel = "stylesheet" href = "assets/styles/style.css" />
</head>
<body ng-controller = "MainController as main">
<h1>Is it open?</h1>
<!-- <button ng-click = ""></button> -->
<div id = "googleMap"></div>
<form>
<input type = "text" ng-model = "main.zipcode"/>
<input type = "submit" ng-click = "main.enterZip()" />
</form>
<div id = "displayInfo">
<ul>
<li ng-repeat = "item in main.openPlaces">
test {{item.name}}
</li>
</ul>
</div>
</body>
</html>
und hier ist die Client-Seite javascript:
angular.module('openApp', [])
.controller('MainController', ['$http', function($http){
var vm = this;
vm.latitude;
vm.longitude;
vm.openPlaces = [];
initialize();
vm.enterZip = function(){
$http.get('/zipcodeApi/'+ vm.zipcode)
.then(function(response){
vm.latitude = response.data.lat;
vm.longitude = response.data.lng;
initialize();
})
}
function initialize(){
var mapLocation = new google.maps.LatLng(vm.latitude, vm.longitude);
var openNow = [];
var mapProp = {
center: mapLocation,
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
var placesRequest = {
location: mapLocation,
radius: '2000',
types: ['restaurant'],
keyword: 'restaurant',
};
var service = new google.maps.places.PlacesService(map);
service.nearbySearch(placesRequest, function(results, status) {
if(status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
var listedHours = results[i].opening_hours;
if(typeof listedHours != 'undefined' && listedHours.open_now === true){
openNow.push(results[i]);
var place = results[i];
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location
});
}
}
}
vm.openPlaces = openNow;
})//closes nearbySearch()
}
}]);
hmmm ... Ich habe den Großteil Ihres Codes repliziert und verspottet, was der Google Map-Dienst tut, und ich sehe nichts falsch Code-weise. Am besten wäre es, Browser-Dev-Tools zu öffnen, einen Breakpoint sowohl in die enterZip(). Then() - Erfolgsfunktion als auch in die service.nearbySearch() -Funktion einzufügen, um zu sehen, ob das openNow-Array das erste Mal gefüllt wird. – TSmith