Не удается загрузить путевые точки и маршруты на Google Maps API v3

Я хочу отображать несколько направлений с перетаскиваемыми путевыми точками и сохранять каждую путевую точку.

В моем проекте я могу щелкнуть карту, чтобы создать маршруты, создать точку пути A и точку пути B и нарисовать маршрут между ними. Таким образом, я могу сделать несколько маршрутов. Я также могу сохранить их в базе данных. Проблема заключается в том, чтобы снова загрузить эти точки на карту, получить их в базе данных и нарисовать все на карте.

У меня есть две страницы, на 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);
}

person Fred Vicentin    schedule 06.08.2012    source источник
comment
Можете ли вы отфильтровать зашумленный код? Вы можете получить лучший ответ, если будете публиковать только то, что актуально.   -  person Matt    schedule 06.08.2012
comment
Отредактировал, отфильтровал максимально возможное, кому нужен мой полный скрипт, может получить доступ к каждой ссылке страницы и использовать CTRL+U для исходного кода.   -  person Fred Vicentin    schedule 06.08.2012


Ответы (1)


Если целью сохранения путевых точек является воспроизведение маршрута, по которому они пришли, лучше сохранить весь маршрут, а затем показать его на карте без повторного запроса маршрута. См. Отображение результатов направления Google. веб-сервис без использования javascript API

В противном случае, если вы просто хотите получить новый маршрут из A в B через путевые точки, ваш текущий подход к вызову ser.route() с ними правильный.

person miguev    schedule 07.07.2016