使用Angularjs将地址数据从数据库加载到谷歌地图中 [英] Loading address data into google maps from database using Angularjs

问题描述

以下是脚本的使用方法：我的应用程序使用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 =repeatmapdata-ng-repeat =marker in markers | orderBy：
'title'> 
< a id =country_containerhref =＃ng- 
 click =openInfoWindow（$ event，marker）> 
< label id =namesformap> {{marker.title}}< / label>< / a> 
< / div> 
  

以下是Controller.js

<$ p $ b $ 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，'点击'）;




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

正如你可以在控制台中看到的，我可以从数据库获得响应，但我无法获得$ scope.cities的值为loop.It说无法读取未定义的属性长度。任何人都可以告诉我如何获得$ scope.cities的值到for循环，以便在地图中我可以显示从数据库返回的城市。现在我能够显示地图但没有城市，也没有标记。我不知道它是否会起作用，或者我做错了什么？

这很可能是因为您正在尝试在数据库请求完成解析之前添加标记。发生这种情况是因为数据库/ 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（）; 
}）; 
 
 
函数setupMapMarkers（）{
 var mapOptions = {
 zoom：4，
 center：new google.maps.LatLng（25,80 ），
 mapTypeId：google.maps.MapTypeId.TERRAIN 
} 
 $ b $ scope.map = new google.maps.Map（document.getElementById（'map'），mapOptions ）; 
 $ scope.markers = []; 
 var infoWindow = new google.maps.InfoWindow（）; $ var 
 $ b 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，'点击'）; 
 
 
 
函数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）; 
} 
} 
  

I am using angularjs for my application.I am trying to load the address from user_address table in database and display it on map on load.

Here is the script i am using to load google maps

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

Here is the 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>

Here is the 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');
        }
    }

In getAllCities function i am getting response from database that is all the names of cities.

As you can see in console i am able to get the response from database but i am not able to get $scope.cities value to for loop.It is saying Cannot read property 'length' of undefined.Can anyone tell how can i get value of $scope.cities into for loop so that in map i can display the cities returned from database.Now i am able to display map but with no cities and no markers.I dont know whether it will work or not or am i doing the wrong way?

解决方案

This is most likely because you're trying to add the markers before the request to the database has finished resolving. This happens because the database/webservice request is most likely executed asynchronously.

Instead run the code for setting up the markers, when your promise from the database request have resolved. Like this:

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将地址数据从数据库加载到谷歌地图中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！