从json数据显示谷歌地图上的路径

时间:2013-07-27 13:05:13

标签: jquery json rest google-maps-api-3

这里我有标记响应,因为Json对象和这些标记在Google地图上显示。这里我想绘制这些标记之间的路径,但是firebug显示错误无效值(value.Latitude)。这里的值是我的JSON对象。

var request = {
                    origin:value.Latitude, 
                    destination:value.Longitude,
                    travelMode: google.maps.DirectionsTravelMode.DRIVING
                };

这是我的整个脚本

  <script type="text/javascript"
    src="http://maps.google.com/maps/api/js?sensor=false">
 </script>

 <style type="text/css">
  #map_canvas {
  height: 500px;
  width: 800px;
  position: static;
  top: 0px;
  left: 100px;
}
</style>



<script>
      var directionDisplay;
       var directionsService = new google.maps.DirectionsService();

     function initialize() {
var latlng = new google.maps.LatLng(18.5236, 73.8478);
directionsDisplay = new google.maps.DirectionsRenderer();

var myOptions = {
    zoom: 8,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    streetViewControl: false,
    mapTypeControl: false
};

    var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
  directionsDisplay.setMap(map);

$(document).ready(function () {
    $("#btnSubmit").click(function () {
        var Source = $("#Source").val();
        var Destination = $("#Destination").val();
        authenticate(Source, Destination);
    });
});

function authenticate(Source,Destination) {
   $('#somediv').empty();

   var table = $('<table/>').appendTo($('#somediv'));
   $.ajax
    ({
      type: 'GET',
        url: 'REST/WebService/GetLogin',
        dataType: 'json',
        data:{'Source': Source, 'Destination': Destination },

        error:function()
        {
            alert("unsuccessfull");
        },
        success:function(feeds)
        {   
            alert(feeds.length);

            $.each(feeds, function (index, value) {

               new google.maps.Marker({
                        position: new google.maps.LatLng(value.Latitude,value.Longitude),
                        map: map,
                        title: "Marker Placing"
              });

                var request = {
                    origin:value.Latitude, 
                    destination:value.Longitude,
                    travelMode: google.maps.DirectionsTravelMode.DRIVING
                };

               directionsService.route(request, function(response, status) {
                    if (status == google.maps.DirectionsStatus.OK) {
                        directionsDisplay.setDirections(response);
                    }
               });  
            });
                //alert(feeds.toSource());
        }

     });
  }
}
</script>

1 个答案:

答案 0 :(得分:0)

showing error invalid value of (value.Latitude).

value.Latitude是一个数字。要将其传递给DirectionsService请求,需要将其转换为google.maps.LatLng对象(其构造函数需要2个数字参数)或字符串,该地址可以进行地理编码。

From the documentation

origin      | LatLng|string | Location of origin. This can be specified as either a string to be geocoded or a LatLng. Required.
destination | LatLng|string | Location of destination. This can be specified as either a string to be geocoded or a LatLng. Required.