私はGPSベースのトラッキングWebアプリケーションを構築するために "AngularJSディレクティブを使ってGoogle Mapsを統合"または通常のangularjsを使用します。

Question

AngularJSとGoogleマップの新機能です。

私のプロジェクトでは、デバイスの最新の位置、再生、現在の位置の位置を&の長さで表示できるGPSベースのトラッキングシステムを構築する必要があります。UI部分では、AngularJSを使用していて、バックエンドはSpringですHibernateを持つMVC

私の質問は、AngularJSディレクティブを使ってGoogleマップを統合したり、角度AngularJSで通常のコードを書いて、Google map.whichに接続してこの環境に適しているということですか？

誰もが私にいくつかのリンクや自分のプロジェクトを構築するためのいくつかのソース、私は& LNG LAT を使用して、Googleマップで位置を作成するために、通常のコードを書か

を参照してください。私はこのコードを書か

：正しいが、第2の警告結果を示す

var myangu = angular.module('mapsApp', []).controller(
    'MapCtrl', 
    function($scope, $http) { 

     var mapOptions = { 
      zoom : 4, 
      center : new google.maps.LatLng(22.5726, 88.3639), 
      mapTypeId : google.maps.MapTypeId.ROADMAP 

     }; 

     $http.get("/java/position").then(
       function(positionlist) { 

        alert(JSON.stringify(positionlist)); 
        $scope.polist = positionlist.data; 
        alert(JSON.stringify($scope.polist)); 
        alert(JSON.stringify(positionlist.speed)); 
        $scope.map = new google.maps.Map(document 
          .getElementById('map'), mapOptions); 


        var mylatlng = new google.maps.LatLng({ 
         lat : positionlist.latitude, 
         lng : positionlist.longitude 
        }); 

        var marker = new google.maps.Marker({ 
         position : mylatlng, 
         map : $scope.map, 
         title : 'address' 

        }); 


       }); 

    }); 

しかし、最初のアラートは "positionlist.latitude" を読ん.Cannot "undefine" です。

これを解決するにはどうすればよいですか？

データベース値（の緯度&の長い）に基づいて、Googleマップでマーカーを設定する方法を今すぐ確認してください。

警告メッセージです：

{ 
    "data": [ 
    { 
     "id": 1, 
     "time": 1475152462000, 
     "valid": true, 
     "latitude": 22.474121666666665, 
     "longitude": 88.39709333333333, 
     "altitude": 0, 
     "speed": 0.539957, 
     "course": 257, 
     "power": null, 
     "address": "kol", 
     "other": "<info><protocol>gt06</protocol><satellites>3</satellites><index>4</index></info>" 
    }, 
    { 
     "id": 2, 
     "time": 1475152472000, 
     "valid": true, 
     "latitude": 22.47413166666667, 
     "longitude": 88.39704, 
     "altitude": 0, 
     "speed": 0.539957, 
     "course": 273, 
     "power": null, 
     "address": "ban", 
     "other": "<info><protocol>gt06</protocol><satellites>3</satellites><index>5</index></info>" 
    }, 
    { 
     "id": 3, 
     "time": 1475152482000, 
     "valid": true, 
     "latitude": 22.474191666666666, 
     "longitude": 88.39689, 
     "altitude": 0, 
     "speed": 1.619871, 
     "course": 281, 
     "power": null, 
     "address": null, 
     "other": "<info><protocol>gt06</protocol><satellites>3</satellites><index>6</index></info>" 
    } 
    ], 
    "status": 200, 
    "config": { 
    "method": "GET", 
    "transformRequest": [ 
     null 
    ], 
    "transformResponse": [ 
     null 
    ], 
    "jsonpCallbackParam": "callback", 
    "url": "/java/position", 
    "headers": { 
     "Accept": "application/json, text/plain, */*" 
    } 
    }, 
    "statusText": "OK" 
} 

Answer 1

は、地図上のマーカーを設定します。

// define the position 
var myLatLng = {lat: data.latitude, lng: data.longitude}; 

var marker = new google.maps.Marker({ 
    position: myLatLng, 
    map: $scope.map, 
    title: 'Hello World!' 
}); 

はhttps://developers.google.com/maps/documentation/javascript/examples/marker-simple?hl=de

を見ます