Javascript 如何使用数据库值在谷歌地图中绘制路线？_Javascript_Google Maps_Google Maps Api 3

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

javascript google-maps google-maps-api-3

Javascript 如何使用数据库值在谷歌地图中绘制路线？,javascript,google-maps,google-maps-api-3,Javascript,Google Maps,Google Maps Api 3,我有这样一个数据库表：我原来的路线是：但是，当我使用数据库值加载地图时，它变成这样：这意味着它不包含所有点，并且航路点已更改。我尝试按创建的方式加载地图，但没有成功它对一条路由很有效，这意味着A到B。但当我尝试加载多条路由（如A到B到c）时，它会产生问题那么问题是什么呢完整代码： <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></

我有这样一个数据库表：

我原来的路线是：

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

这意味着它不包含所有点，并且航路点已更改。我尝试按创建的方式加载地图，但没有成功

它对一条路由很有效，这意味着

A到B

。但当我尝试加载多条路由（如

A到B到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>


var映射，ren，ser；
var请求；
变量数据={}；
函数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=新的google.maps.DirectionsService（）；
fetchdata（）
}
函数fetchdata（）
{
var jax=window.XMLHttpRequest？new-XMLHttpRequest（）：new-ActiveXObject（'Microsoft.XMLHTTP'）；
open（'POST'，'process.php'）；
setRequestHeader（'Content-Type'，'application/x-www-form-urlencoded'）；
send（'command=fetch'）
jax.onreadystatechange=function（）{if（jax.readyState==4）{
var jsonobj=JSON.parse（jax.responseText）；
试一试{
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]+'）；
对于（var j=0；j而言，您似乎以错误的顺序通过了航路点。请确保：
 wp[0] = A, wp[1] = B and wp[2] = C

你克服了吗？你尝试了不同的方法吗？你检查了航路点顺序吗？试着将中途停留设置为true