使用AngularJS在Google Maps中实现标记

Aashir Shukla 发表于 Dev

Aashir shukla

我在将JSON数据作为标记usign 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”和“状态”，我将在以后进行研究。

用户名

这是一个例子。Angular控制器使用全局变量中包含的JSON数据，mydata并使用它向地图添加一些标记。标记的信息也可以在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。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。