javascript – 使用AngularJS在Google地图中实现标记

2023年8月22日 146次阅读

我在向Google地图实施 JSON数据时遇到了问题,因为它标记了Angular.我的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”,我将在稍后介绍.

最佳答案 这是一个例子. Angular控制器使用全局变量mydata中包含的JSON数据,并使用它向地图添加一些标记. Angular $范围中也提供了标记的信息.

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.

点赞