来自数据库的角度谷歌地图折线坐标答案

【问题标题】：Angular Google Maps Polyline Coordinates from Database来自数据库的角度谷歌地图折线坐标
【发布时间】：2016-05-19 06:07:50
【问题描述】：

我正在尝试使用带有数据库坐标的 Angular Google 地图在 Ionic 应用程序上显示折线。我阅读了 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>

【问题讨论】：

标签： angularjs google-maps angular-google-maps google-polyline

【解决方案1】：

敌人的例子

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

【讨论】：

【解决方案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>

【讨论】：