使用AngularJS在Google Maps中實現標記

Question

我在將JSON數據作爲標記使用Angular時將問題實現到Google Maps中時出現問題。我的JSON數據是：

[ 
    { 
    "_id": "TRK45679101121", 
    "timestamp": "2015-02-03T09:18:02.989Z", 
    "status": 1, 
    "path": [ 
     { 
     "timestamp": 51422955082989, 
     "speed": 30, 
     "direction": 45.510029, 
     "longitude": 81.510029, 
     "latitude": 8.675009 
     } 
    ] 
    }, 
    { 
    "_id": "TRK456799", 
    "timestamp": "2015-02-03T09:18:02.989Z", 
    "status": 1, 
    "path": [ 
     { 
     "timestamp": 51422955082989, 
     "speed": 30, 
     "direction": 45.510029, 
     "longitude": 81.510029, 
     "latitude": 8.675009 
     } 
    ] 
    }, 
    { 
    "_id": null, 
    "timestamp": "2016-01-22T08:10:43.238Z", 
    "status": null, 
    "path": null 
    } 
] 

您是否知道如何通過JavaScript閱讀此內容並將其集成到Google Maps API中？任何幫助將不勝感激，在此先感謝。

注：我只需要實現經緯度。如果點擊標記，需要顯示「_id」和「狀態」，我將在稍後討論。

Answer 1

下面是一個例子。 Angular控制器使用全局變量mydata中包含的JSON數據，並使用它將一些標記添加到地圖。標記的信息也可在角$scope中找到。

var mydata = [{ 
 
    "_id": "TRK45679101121", 
 
    "timestamp": "2015-02-03T09:18:02.989Z", 
 
    "status": 1, 
 
    "path": [{ 
 
    "timestamp": 51422955082989, 
 
    "speed": 30, 
 
    "direction": 45.510029, 
 
    "longitude": 31.510029, 
 
    "latitude": 8.675009 
 
    }] 
 
}, { 
 
    "_id": "TRK456799", 
 
    "timestamp": "2015-02-03T09:18:02.989Z", 
 
    "status": 1, 
 
    "path": [{ 
 
    "timestamp": 51422955082989, 
 
    "speed": 30, 
 
    "direction": 45.510029, 
 
    "longitude": 32.510029, 
 
    "latitude": 12.675009 
 
    }] 
 
}]; 
 

 
//Angular App Module and Controller 
 
angular.module('mapsApp', []) 
 
    .controller('MapCtrl', function($scope,$http) { 
 

 
    var mapOptions = { 
 
     zoom: 4, 
 
     center: new google.maps.LatLng(31, 8), 
 
     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(lat, lng) { 
 

 
     var marker = new google.maps.Marker({ 
 
     map: $scope.map, 
 
     position: new google.maps.LatLng(lat, lng), 
 
     title: "lat: " + lat + ",lng: " + lng 
 
     }); 
 

 
     $scope.markers.push(marker); 
 

 
    } 
 
    
 
    $http({method: 'GET', url: "http://maps.google.com/maps/api/geocode/json?address=Canada&sensor=true&region=USA"}). 
 
     success(function(data, status) { 
 
      $scope.status = status; 
 
      $scope.JSONdata = data; 
 
      console.log(JSON.stringify(data)); 
 
     }). 
 
     error(function(data, status) { 
 
      $scope.JSONdata = data || "Request failed"; 
 
      $scope.status = status; 
 
      console.log($scope.data+$scope.status); 
 
     }); 
 
    
 

 
    for (i = 0; i < mydata.length; i++) { 
 
     console.log(mydata[i]["path"][0]["longitude"], mydata[i]["path"][0]["latitude"]); 
 
     createMarker(mydata[i]["path"][0]["longitude"],mydata[i]["path"][0]["latitude"]); 
 
    } 
 

 
    });

#map { 
 
    height: 420px; 
 
}

<script src="https://maps.googleapis.com/maps/api/js?key=&sensor=false&extension=.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="mapsApp" ng-controller="MapCtrl"> 
 
    <H3> 
 
Markers 
 
</H3> 
 
    <div id="class" ng-repeat="marker in markers | orderBy : 'title'"> 
 
    {{marker.position}} 
 
    </div> 
 
</div> 
 

 
<div id="map"></div>

編輯：檢索從遠程HTTP服務器的JSON數據，使用角的$http。在該示例中，響應數據保存在$scope.JSONdata中，可用於代替mydata。