Я пытаюсь отображать маркеры на карте с помощью AngularJs и API Карт Google. Но по какой-то причине я не могу отображать маркеры. Я не уверен, что я не буду извлекать данные из базы данных, но если кто-то может помочь мне, это будет здорово!
.controller('MapCtrl', ['$scope', '$state', '$cordovaGeolocation', '$ionicSideMenuDelegate', '$ionicModal', 'LocationService', function($scope, $state, $cordovaGeolocation, $ionicSideMenuDelegate, $ionicModal, LocationService) {
$scope.locations = [];
LocationService.getLocations().then(function (result) {
$scope.locations = result.data;
});
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(40.0000, -98.0000),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
$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.name
});
marker.content = '<div class="infoWindowContent">' + info.name + '</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 < $scope.locations.length; i++){
createMarker($scope.locations[i]);
}
$scope.openInfoWindow = function(e, selectedMarker){
e.preventDefault();
google.maps.event.trigger(selectedMarker, 'click');
}
}])
.service('LocationService', function ($http, Backand) {
var baseUrl = '/1/objects/';
var objectName = 'locations/';
function getUrl() {
return Backand.getApiUrl() + baseUrl + objectName;
}
function getUrlForId(id) {
return getUrl() + id;
}
getLocations = function () {
return $http.get(getUrl());
};
return {
getLocations: getLocations
}
})
как данные хранятся в базе данных
{
"id": 1,
"name": "Ballentine Hall",
"lat": 39.165935,
"long": -86.521287
}
Ну, я заработал. Довольно уверен, что это не правильный/самый эффективный способ сделать это, но по крайней мере его работа.
Итак, я понял, что функция createMarker не может считывать данные, хранящиеся в переменной местоположений. Чтобы исправить это, я просто поместил весь код для карты внутри функции, которая получает данные о местоположении из базы данных. Это решило проблему получения данных.
Вторая проблема заключалась в том, что он не получал правильные данные из этих мест. Итак, в функции getList
я изменил код на это: $scope.locations = response.data.data;
тогда все приступило к работе.
.controller('MapCtrl', ['$scope', '$state', '$cordovaGeolocation', '$ionicSideMenuDelegate', '$ionicModal', 'dataService', '$http', 'Backand', function($scope, $state, $cordovaGeolocation, $ionicSideMenuDelegate, $ionicModal, dataService, $http, Backand) {
$scope.locations = [];
dataService.getList('locations').then(function(response) {
$scope.locations = response.data.data;
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(40.0000, -98.0000),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
$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.name
});
marker.content = '<div class="infoWindowContent">' + info.name + '</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 < $scope.locations.length; i++){
createMarker($scope.locations[i]);
}
$scope.openInfoWindow = function(e, selectedMarker){
e.preventDefault();
google.maps.event.trigger(selectedMarker, 'click');
}
});
Вы проверяли, получаете ли вы данные в $ scope.locations к моменту вызова функции createMarker. используйте console.log, чтобы увидеть
for (i = 0; i < $scope.locations.length; i++){
console.log($scope.locations);
createMarker($scope.locations[i]);
}
Из-за асинхронного характера javascript он перейдет к следующей строке и выполнит программу, после того как ваше обещание решит, что оно будет связывать данные.
console.log($scope.locations)
вне цикла, и я получил пустой список. Итак, похоже, что я не получаю данные, которые не имеют никакого смысла, потому что я использовал ту же функцию в другом контроллере, и я смог получить данные ...
console.log(info)
в функцию createMarker, как будет выглядеть пример для одной итерации?