Угловые карты Полилинии Google Координаты из базы данных

Question

Я пытаюсь отобразить полилинию в ионическом приложении с использованием угловых Google Maps с координатами из базы данных. Я прочитал документацию на сайте Angular Google Maps относительно получения координат и попыток создать путь через координаты из API. Я попытался использовать Angular.forEach, чтобы использовать checklat и checklong в качестве моих координат, но он ничего не отображает на карте. Как использовать координаты по приведенным ниже данным для отображения в виде полилинии?

Данные API:

_id "57393e042613d90300a35a0a" 
    tripstatus "1" 
    tripcreated "1463367863236" 
    tripdescription "testing one two three. i am ironman." 
    tripname "New trip to test user current trip" 
    __v 0 
checks 
0 checklat " 10.72403187357376" 
    checklong "122.53443290985284" 
    time "1463367863236" 
    _id "57394ae62613d90300a35a10" 
1 checklat "10.724010661667863" 
    checklong "122.53442867631733" 
    time "1463367863236" 
    _id "57394b272613d90300a35a16" 
2 checklat "10.6817828" 
    checklong "122.5389465" 
    time "1463367863236" 
    _id "57394c662613d90300a35a1a" 

Мой контроллер:

TripFac.getTrip(id).success(function(data) { 

$scope.trips = data; 

var latlng = data[0].checks; 

angular.forEach(latlng, function(path) {  
    path = { 
     latitude: checklat, 
     longitude: checklong 
    } 
}); 

$scope.latlng = latlng; 
}); 




//Get Trip Points and put on polyline 
$scope.polylines = []; 
    uiGmapGoogleMapApi.then(function(){ 
     $scope.polylines = [ 
     { 
      path: latlng, 
      stroke: { 
       color: '#6060FB', 
       weight: 3 
      }, 
      geodesic: true, 
      visible: true, 
      icons: [{ 
       icon: { 
        path: google.maps.SymbolPath.BACKWARD_OPEN_ARROW 
       }, 
       offset: '25px', 
       repeat: '50px' 
      }] 
     } 
    ]; 
}); 

Мое мнение:

<ui-gmap-google-map 
center="map.center" 
zoom="map.zoom" 
id="wrapper"> 
<style> 
.angular-google-map-container { height:450px; width:auto; } 
</style> 

<ui-gmap-polyline ng-repeat="p in polylines" path="p.path" stroke="p.stroke" visible='p.visible' geodesic='p.geodesic' fit="false" editable="p.editable" draggable="p.draggable" icons='p.icons'></ui-gmap-polyline> 

</ui-gmap-google-map> 

Answer 1

Foe пример

$scope.map.center = { 
    latitude: $scope.latitude, 
    longitude: $scope.longitude 
    }; 

    var directionsDisplay = new google.maps.DirectionsRenderer({ 
    suppressMarkers: true 
    }); 
    var directionsService = new google.maps.DirectionsService(); 

    $scope.directions = { 
    origin: new google.maps.LatLng($scope.lat, $scope.lng), 
    destination: new google.maps.LatLng($scope.latitude, $scope.longitude), 
    showList: false 
    } 
    var request = { 
    origin: $scope.directions.origin, 
    destination: $scope.directions.destination, 
    travelMode: google.maps.DirectionsTravelMode.DRIVING 
    }; 
    directionsService.route(request, function(response, status) { 
    if (status === google.maps.DirectionsStatus.OK) { 
     directionsDisplay.setDirections(response); 
     directionsDisplay.setMap($scope.map.control.getGMap()); 
    } else {} 
    }); 

Answer 2

Это может быть связано с одной из следующих причин:

• неопределеннымиlatlng объект передается в $scope.polylines, должно быть изменено на $scope.latlng
• $scope.polylines может быть инициализирована до того, как получать загружены данные JSON

В следующем примере показано, как загрузить данные из внешнего источника и инициализировать многоугольник на карте:

angular.module('map-example', ['uiGmapgoogle-maps']) 
 
    .controller('MapController', function($scope, $http, uiGmapGoogleMapApi, uiGmapIsReady) { 
 

 

 
     $scope.map = { 
 
      zoom: 12, 
 
      bounds: {}, 
 
      center: { latitude: 10.6817828, longitude: 122.53443290985284 } 
 
     }; 
 

 

 
     var loadPathData = function() { 
 
      return $http.get('https://rawgit.com/vgrem/3fc4ffc90de778f38f09b671466001fa/raw/8da45ddf4b174d758892e8a6514fea9145f4b91b/data.json') 
 
       .then(function(res) { 
 
        //extract data 
 
        return res.data[0].checks.map(function(item) { 
 
         return { 
 
          latitude: item.checklat, 
 
          longitude: item.checklong 
 
         } 
 
        }); 
 
       }); 
 
     }; 
 
     
 
     
 
     
 
     var drawPolylines = function(path) { 
 
      $scope.polylines = [ 
 
        { 
 
         path: path, 
 
         stroke: { 
 
          color: '#6060FB', 
 
          weight: 3 
 
         }, 
 
         geodesic: true, 
 
         visible: true, 
 
         icons: [{ 
 
          icon: { 
 
           path: google.maps.SymbolPath.BACKWARD_OPEN_ARROW 
 
          }, 
 
          offset: '25px', 
 
          repeat: '50px' 
 
         }] 
 
        } 
 
       ]; 
 
     } 
 

 

 
     uiGmapIsReady.promise() 
 
      .then(function(instances) { 
 

 
       loadPathData() 
 
       .then(drawPolylines);     
 

 
      }); 
 

 
    });

.angular-google-map-container { 
 
    height: 450px; 
 
    width: auto; 
 
}

<div ng-app="map-example" ng-controller="MapController"> 
 

 
    <ui-gmap-google-map center="map.center" zoom="map.zoom" id="wrapper">   
 
     <ui-gmap-polyline ng-repeat="p in polylines" path="p.path" stroke="p.stroke" visible='p.visible' geodesic='p.geodesic' fit="false" 
 
     editable="p.editable" draggable="p.draggable" icons='p.icons'></ui-gmap-polyline> 
 
    </ui-gmap-google-map> 
 

 

 
    <script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.0.1/lodash.js" type="text/javascript"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script> 
 
    <script src="http://cdn.rawgit.com/nmccready/angular-simple-logger/0.0.1/dist/index.js"></script> 
 
    <script src="http://cdn.rawgit.com/angular-ui/angular-google-maps/master/dist/angular-google-maps.min.js"></script> 
 
</div>