0

ここでは、Json オブジェクトとして応答するマーカーがあり、これらのマーカーは Google マップに表示されます。ここでは、これらのマーカー間にパスを描画したいのですが、(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>
4

1 に答える 1