使用Angularjs将地址数据从数据库加载到谷歌地图中

Question

我正在为我的应用程序使用 angularjs。我正在尝试从数据库中的 user_address 表中加载地址并在加载时将其显示在地图上。

这是我用来加载谷歌地图的脚本

    <script async defer src="https://maps.googleapis.com/maps/api/js?
    key=myKey&callback=initMap">
    </script>

这里是html

    <div id="map"></div>
    <div id="repeatmap" data-ng-repeat="marker in markers | orderBy :
    'title'">
    <a id="country_container" href="#" ng-
    click="openInfoWindow($event, marker)">
    <label id="namesformap" >{{marker.title}}</label></a>
    </div>

这是 Controller.js

    var DirectoryController = function($scope, $rootScope, $http,
    $location, $route,DirectoryService,HomeService,$routeParams) 
    {

    $scope.getAllCities = function()
    {
        DirectoryService.getAllCities().then(function(response){
        $scope.cities = response.data;
        console.log($scope.cities);
    })
    }

    var mapOptions = {
        zoom: 4,
        center: new google.maps.LatLng(25,80),
        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>';
     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 (var i = 0; i < $scope.cities.length; i++){
        createMarker($scope.cities[i]);
    }

    $scope.openInfoWindow = function(e, selectedMarker){
        e.preventDefault();
        google.maps.event.trigger(selectedMarker, 'click');
        }
    }

在 getAllCities 函数中，我从数据库中得到所有城市名称的响应。

正如您在控制台中看到的那样，我能够从数据库中获取响应，但我无法将 $scope.cities 值获取到 for 循环。它说无法读取未定义的属性“长度”。谁能告诉我如何我可以将 $scope.cities 的值放入 for 循环中，以便在地图中我可以显示从数据库返回的城市。现在我可以显示地图但没有城市和标记。我不知道它是否会工作我做错了吗？

Answer 1

这很可能是因为您试图在对数据库的请求完成解析之前添加标记。发生这种情况是因为数据库/Web 服务请求很可能是异步执行的。

当您来自数据库请求的承诺已解决时，请运行代码来设置标记。像这样：

var DirectoryController = function($scope, $rootScope, $http, $location, $route,DirectoryService, HomeService, $routeParams) 
{
    $scope.getAllCities = function()
    {
        DirectoryService.getAllCities().then(function(response){
            $scope.cities = response.data;
            console.log($scope.cities);
            setupMapMarkers();
        });
    }

    function setupMapMarkers(){
        var mapOptions = {
            zoom: 4,
            center: new google.maps.LatLng(25,80),
            mapTypeId: google.maps.MapTypeId.TERRAIN
        }

        $scope.map = new google.maps.Map(document.getElementById('map'), mapOptions);
        $scope.markers = [];
        var infoWindow = new google.maps.InfoWindow();

        for (var i = 0; i < $scope.cities.length; i++){
            createMarker($scope.cities[i]);
        }

        $scope.openInfoWindow = function(e, selectedMarker){
            e.preventDefault();
            google.maps.event.trigger(selectedMarker, 'click');
        }
    }

    function createMarker(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>';
        google.maps.event.addListener(marker, 'click', function(){
            infoWindow.setContent('<h2>' + marker.title + '</h2>' + marker.content);
            infoWindow.open($scope.map, marker);
        });
        $scope.markers.push(marker);
    }  
}