解析json中的坐标以显示在地图上？ [英] Parsing coordinates in json to show on a map?

问题描述

我正尝试使用Google Maps API来显示使用折线的用户的路径。我从我创建的休息API获取json格式的坐标。 api工作正常，但地图没有显示路径。这里是json格式

  [{user：qwerty，latitude：28.648036，longitude：77.2326533 }，{ 用户： QWERTY， 纬度：28.646096， 经度：77.183385}，{ 用户： QWERTY， 纬度：28.640015， 经度：77.168119}，{ 用户 ：qwerty，latitude：28.644299，longitude：77.162207}] 
  

我使用的JavaScript代码

 < script async defer 
 src =https：// maps .googleapis.com /地图/ API / JS回调= initMap>？< /脚本> 
 
< script> 
 
 var username =<％= session.getAttribute（Member）。toString（）％>; 
 
 var flightPlanCoordinates = []; 
 $（document）.ready（function（）{
 $ .ajax（{
 url：http://127.0.0.1:8082/letstravel/location/\"+username，
 dataType：json，
成功：function（data）{
 for（var i in data）{
 flightPlanCoordinates.push（{lat：data [i] .latitude， lng：data [i] .longitude}）; 
} 
} 
}）; 
}）; 
 
函数initMap（）{
 var map = new google.maps.Map（document.getElementById（'map'），{
 zoom：3，
 center ：{lat：0，lng：-180}，
 mapTypeId：google.maps.MapTypeId.TERRAIN 
}）; 
 
 
 var flightPath = new google.maps.Polyline（{
 path：flightPlanCoordinates，
 geodesic：true，
 strokeColor：'＃FF0000'， 
 strokeOpacity：1.0，
 strokeWeight：2 
}）; 
 
 flightPath.setMap（map）; 
} 
< / script> 
  

flightPlanCoordinates应该采用以下格式：

 flightPlanCoordinates = [
 {lat：37.772，lng：-122.214}，
 {lat：21.291，lng：-157.821}，
 {lat： -18.142，lng：178.431}，
 {lat：-27.467，lng：153.027} 
]; 
  

这似乎不起作用。我想我没有正确处理json。请帮助。 code><脚本>


函数initMap（）{

var username =<％= session.getAttribute（Member）。toString（）％>;

var flightPlanCoordinates = [];
$（document）.ready（function（）{
$ .ajax（{
url：http://127.0.0.1:8082/letstravel/location/\"+username，
dataType：json，
成功：function（data）{
for（var i in data）{
flightPlanCoordinates.push（{lat：data [i] .latitude， lng：data [i] .longitude}）;
}
}
}）;
}）;


var map = new google.maps.Map（document.getElementById（'map'），{
zoom：3，
center：{lat：0 ，lng：-180}，
mapTypeId：google.maps.MapTypeId.TERRAIN
}）;


var flightPath = new google.maps.Polyline（{
path：flightPlanCoordinates，
geodesic：true，
strokeColor：'＃FF0000'，
strokeOpacity：1.0，
strokeWeight：2
}）;

flightPath.setMap（map）;
}
< / script>

I am trying to use google maps api to show path of a user using a polyline. I am getting the coordinates in json format from a rest api i created. The api is working correctly but the map is not showing the path. Here is the json format

[{"user":"qwerty","latitude":28.648036,"longitude":77.2326533},{"user":"qwerty","latitude":28.646096,"longitude":77.183385},{"user":"qwerty","latitude":28.640015,"longitude":77.168119},{"user":"qwerty","latitude":28.644299,"longitude":77.162207}]

and here is the javascript code i am using for the map

<script async defer
        src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>

<script>

    var username = "<%= session.getAttribute("Member").toString() %>";

    var flightPlanCoordinates = [];
      $(document).ready(function(){
           $.ajax({
               url: "http://127.0.0.1:8082/letstravel/location/"+username,
               dataType: "json",
                success: function(data) {
                    for(var i in data){
                        flightPlanCoordinates.push({ lat: data[i].latitude, lng: data[i].longitude });
                    } 
                        }
           });  
      });

    function initMap() {
      var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 3,
        center: {lat: 0, lng: -180},
        mapTypeId: google.maps.MapTypeId.TERRAIN
      });


      var flightPath = new google.maps.Polyline({
        path: flightPlanCoordinates,
        geodesic: true,
        strokeColor: '#FF0000',
        strokeOpacity: 1.0,
        strokeWeight: 2
      });

      flightPath.setMap(map);
    }
</script>

flightPlanCoordinates should be in this format :

flightPlanCoordinates = [
    {lat: 37.772, lng: -122.214},
    {lat: 21.291, lng: -157.821},
    {lat: -18.142, lng: 178.431},
    {lat: -27.467, lng: 153.027}
  ];

This does not seem to work. I think I am not handling json correctly. Please help.

解决方案

try this way

<script>


    function initMap() {

    var username = "<%= session.getAttribute("Member").toString() %>";

    var flightPlanCoordinates = [];
      $(document).ready(function(){
           $.ajax({
               url: "http://127.0.0.1:8082/letstravel/location/"+username,
               dataType: "json",
                success: function(data) {
                    for(var i in data){
                        flightPlanCoordinates.push({ lat: data[i].latitude, lng: data[i].longitude });
                    } 
                        }
           });  
      });


      var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 3,
        center: {lat: 0, lng: -180},
        mapTypeId: google.maps.MapTypeId.TERRAIN
      });


      var flightPath = new google.maps.Polyline({
        path: flightPlanCoordinates,
        geodesic: true,
        strokeColor: '#FF0000',
        strokeOpacity: 1.0,
        strokeWeight: 2
      });

      flightPath.setMap(map);
    }
</script>

这篇关于解析json中的坐标以显示在地图上？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！