0

Ich versuche, eine Polylinie auf einer Ionic-Anwendung mit Angular Google Maps mit Koordinaten aus einer Datenbank anzuzeigen. Ich habe die Dokumentation auf der Google Maps-Website von Angular gelesen, um die Koordinaten abzurufen und zu versuchen, den Pfad über die Koordinaten einer API zu erstellen. Ich habe versucht, Angular.forEach zu verwenden, um checklat und checklong als meine Koordinaten zu verwenden, aber es zeigt nichts auf der Karte an. Wie kann ich die Koordinaten der folgenden Daten als Polylinie verwenden?Winkel Google Maps Polylinie Koordinaten aus Datenbank

Daten von 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" 

Mein Controller:

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

Meine Ansicht:

<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> 

Antwort

0

Foe Beispiel

$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 {} 
    }); 
0

Es ist mit einem der folgenden Gründe zusammenhängen könnte:

  • undefined latlng Objekt übergeben wird in $scope.polylines, muss $scope.latlng
  • $scope.polylines konnte initialisiert werden geändert werden, bevor wird json Daten immer geladen

Das folgende Beispiel zeigt, wie Daten von einer externen Quelle geladen und ein oder mehrere Polygone auf der Karte initialisiert werden:

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>

Verwandte Themen