如何使用数据库值在谷歌地图中绘制路线?

时间:2013-10-23 07:51:24

标签: javascript google-maps google-maps-api-3

我有一个这样的数据库表:

enter image description here

我原来的路线是:

enter image description here

但是,当我使用数据库值加载地图时,它变成了这样:

enter image description here

表示它不包含所有点并且路点已更改。我尝试加载地图与我创建的相同,但没有成功。

它适用于一条路线,意味着A to B。但是当我尝试加载多条路线(例如A to B to c)时会产生问题。

那么问题是什么?

完整代码:

    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<body onLoad="goma()">
<div id="mappy" style="width:80%; height:400px; float:left; margin-top:100px"></div>

<script>
var map, ren, ser;
var request;
var data = {};
function goma()
{
map = new google.maps.Map( document.getElementById('mappy'), {'zoom':12, 'mapTypeId': google.maps.MapTypeId.ROADMAP, 'center': new google.maps.LatLng(23.0171240, 72.5330533) })

    ren = new google.maps.DirectionsRenderer( {'draggable':true} );
    ren.setMap(map);
    ser = new google.maps.DirectionsService();
    fetchdata()
}

function fetchdata()
{
    var jax = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
    jax.open('POST','process.php');
    jax.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

    jax.send('command=fetch')
    jax.onreadystatechange = function(){ if(jax.readyState==4) {                
        var jsonobj = JSON.parse(jax.responseText);

        try {
                console.log(jax.responseText);
                var tot_length=JSON.parse(jax.responseText).length;
                var wp = [];
                var startos=eval('(' + jsonobj[0] + ')');
                var lastos=eval('(' + jsonobj[tot_length-1] + ')');
                for(var j=0;j<JSON.parse(jax.responseText).length;j++) 
                {
                 var os = eval('(' + jsonobj[j] + ')');
                    for(var i=0;i<os.waypoints.length;i++)
                    {
                         wp.push({
                             'location': new google.maps.LatLng(os.waypoints[i][0], os.waypoints[i][1]),
                             'stopover':false 
                         }); 
                    }
                }

                 alert(startos.start.lat+","+startos.start.lng+"<br>"+lastos.end.lat+","+lastos.end.lng);
                 request = 
                         {
                              origin:new google.maps.LatLng(startos.start.lat,startos.start.lng),
                              destination:new google.maps.LatLng(lastos.end.lat,lastos.end.lng),
                              waypoints:wp,
                              travelMode: google.maps.DirectionsTravelMode.DRIVING
                         };

                 ser.route(request, function(res,sts) {
                    if (sts == google.maps.DirectionsStatus.OK)
                    {
                      ren.setDirections(res);
                    }   
                 });    

            }
        catch(e){ alert(e); }
    }}
}
</script>
</body>

提前致谢。

1 个答案:

答案 0 :(得分:0)

看起来你正在以错误的顺序传递航路点。确保:

 wp[0] = A, wp[1] = B and wp[2] = C