AngularJs и Google Maps Проблема: не отображаются маркеры?

0

Я пытаюсь отображать маркеры на карте с помощью 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
}
  • 0
    если вы поместите console.log(info) в функцию createMarker, как будет выглядеть пример для одной итерации?
  • 0
    Похоже, что этот угловой порт вашего кода в jsfiddle работает - может, вам стоит проверить свои данные?
Показать ещё 1 комментарий
Теги:
google-maps
google-maps-api-3

2 ответа

1
Лучший ответ

Ну, я заработал. Довольно уверен, что это не правильный/самый эффективный способ сделать это, но по крайней мере его работа.

Итак, я понял, что функция 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');
    } 
  });
0

Вы проверяли, получаете ли вы данные в $ scope.locations к моменту вызова функции createMarker. используйте console.log, чтобы увидеть

 for (i = 0; i < $scope.locations.length; i++){
        console.log($scope.locations);
        createMarker($scope.locations[i]);
    }

Из-за асинхронного характера javascript он перейдет к следующей строке и выполнит программу, после того как ваше обещание решит, что оно будет связывать данные.

  • 0
    Ничего не появилось в консоли, когда я это сделал. Итак, я попытался console.log($scope.locations) вне цикла, и я получил пустой список. Итак, похоже, что я не получаю данные, которые не имеют никакого смысла, потому что я использовал ту же функцию в другом контроллере, и я смог получить данные ...
  • 0
    разрешите местоположение, прежде чем активировать это состояние и вызвать контроллер или вызвать ваши createmarkers fn при вашем успешном вызове API.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню