无法在谷歌地图api v3上加载航点和路线v3

Question

我想显示带有可拖动航点的多个方向并保存每个航点。

在我的项目上，我可以点击地图来创建路线，生成一个wayA点和一个wayB点并在它们之间绘制一条路线。所以，我可以制作多个路线。 我也可以将它们保存在数据库中。 问题是在地图上再次加载这些点，并将它们在数据库中提取并在地图上绘制所有点。

我有两页，在index.htm你可以绘制你的路线并保存它们，并在loady.htm上，你可以加载它们在地图上。

我尝试了一些东西，但没有成功，我会在这里发布我的尝试。

这是我恢复的index.htm

var map, ren, ser; 
var data = {};  
var wayA = []; 
var wayB = []; 
var directionResult = []; 

function goma() <---Initialize 
{ 


google.maps.event.addListener(map, "click", function(event) { 
     if (wayA.length == wayB.length) { 
     wayA.push(new google.maps.Marker({ 
     draggable: true,  
      position: event.latLng, 
      map: map 

     })); 
     } else { 
     wayB.push(new google.maps.Marker({ 
     draggable: true, 
      position: event.latLng, 
      map: map 

     })); 
    ren = new google.maps.DirectionsRenderer({'draggable':true}); 
    ren.setMap(map); 
    ren.setPanel(document.getElementById("directionsPanel")); 
    ser = new google.maps.DirectionsService(); 
    ser.route({ 'origin': wayA[wayA.length-1].getPosition(), 'destination': wayB[wayB.length-1].getPosition(), 'travelMode': google.maps.DirectionsTravelMode.DRIVING},function(res,sts) { 
     if(sts=='OK') { 
        directionResult.push(res); 
        ren.setDirections(res); 
       } else { 
        directionResult.push(null); 
       } })  
} }); } 

function save_waypoints() 
{ 
    var w=[],wp; 
    var rleg = ren.directions.routes[0].legs[0]; 
    data.start = {'lat': rleg.start_location.lat(), 'lng':rleg.start_location.lng()} 
    data.end = {'lat': rleg.end_location.lat(), 'lng':rleg.end_location.lng()} 
    var wp = rleg.via_waypoints 
    for(var i=0;i<wp.length;i++)w[i] = [wp[i].lat(),wp[i].lng()]  
    data.waypoints = w; 
    var str = JSON.stringify(data) 
    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=save&inventoresdegara='+str) 
    jax.onreadystatechange = function(){ if(jax.readyState==4) { 
     if(jax.responseText.indexOf('bien')+1)alert('Mapa Atualizado !'); 
     else alert(jax.responseText)   
    }} 
} 

这是续loady.htm我尝试

var map, ren, ser; 
var data = {}; 
var wayA = []; 
var wayB = []; 
var directionResult = []; 

function goma() { 

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

    function setroute(os) 
{ 
    var wp = []; 
    for(var i=0;i<os.waypoints.length;i++) 
     wp[i] = {'location': new google.maps.LatLng(os.waypoints[i][0], os.waypoints[i][3]),'stopover':false } 
    ser.route({ 'origin': wayA[wayA.length-1].setPosition(), 'destination': wayB[wayB.length-1].setPosition(), 'travelMode': google.maps.DirectionsTravelMode.DRIVING},function(res,sts) { 
     if(sts=='OK') { 
        directionResult.push(res); 
        ren.setDirections(res); 
       } else { 
        directionResult.push(null); 
       }  
}); 
} 
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) {   
     try { setroute(eval('(' + jax.responseText + ')')); } 
     catch(e){ alert(e); } 

    }}  

} 

这是我的PHP文件：

<? 
    if($_REQUEST['command']=='save') 
    { 

     $query = "insert into inventoresdegara set value='$data'"; 
     if(mysql_query($query))die('bien'); 
     die(mysql_error());     
    } 
    if($_REQUEST['command']=='fetch') 
    { 
     //$query = "select value from inventoresdegara"; 
     $query = "SELECT value FROM inventoresdegara"; 
     if(!($res = mysql_query($query)));  
     $rs = mysql_fetch_array($res,1); 
     die($rs['value']);  
    } 
?> 

这从我的数据库中的图像，你知道如何保存信息

我唯一需要做的就是将这个值加载到地图上，请帮助我=）。

谢谢！

我尝试后，loady.htm是这样的ser.routes

ser.route({'origin':new google.maps.LatLng(os.start.lat,os.start.lng), 
    'destination':new google.maps.LatLng(os.end.lat,os.end.lng), 
    'waypoints': wp, 

    'travelMode': google.maps.DirectionsTravelMode.DRIVING},function(res,sts) { 
     if(sts=='OK')ren.setDirections(res); 
} 

Answer 1

如果在保存航点的原因是为了重现他们来自的路线，你最好保存整个路线和然后在地图上显示它，而无需再次重新请求路线。请参阅Displaying results of google direction web service without using javascript api

否则，如果您只想通过航点获取从A到B的新路线，那么您当前使用它们调用ser.route（）的方法是正确的。