使用 AngularJS 在谷歌地图中实现标记

Question

我在将 JSON 数据作为使用 Angular 的标记实现到 Google 地图中时遇到问题。我的 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”和“status”，稍后我将对其进行研究。

Answer 1

这是一个例子。 Angular 控制器使用包含在全局变量 mydata 中的 JSON 数据，并使用它向地图添加一些标记。标记的信息也可以在 Angular $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 数据，请使用 Angular 的 $http。在示例中，响应数据保存在$scope.JSONdata 中，可以用来代替mydata。