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循环。它是说无法读取属性＆＃39;长度＆＃39;未定义。任何人都可以告诉我如何获得$ scope.cities的值进入for循环，以便在地图中我可以显示从数据库返回的城市。现在我能够显示地图但没有城市，没有标记。我不知道是否会起作用或我做错了吗？

Answer 1

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

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

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);
    }  
}

使用Angularjs

1 个答案: