谷歌地圖v3上可點擊的行車路線

Question

我正在做一個谷歌地圖項目，並需要創建一個點擊它的路線。

我的項目有2個點，它有一個預定義的lat和lng，我想自己繪製A和B點的開始和結束，並且不會失去它的功能。

我做另外一個項目，你可以點擊繪製的路線，但它沒有標記，並且不draggabble，this is my actual project與完整的代碼 我會在這裏發表簡短的代碼只能用我的方向。

我想，我的第一次點擊的A點和第二點我B，並可能拖累他們，像項目鏈接

function goma() 
{ 
    var mapDiv = document.getElementById('mappy'); 
    var mapOptions = { 
    zoom: 12, 
    center: new google.maps.LatLng(-23.563594, -46.654239), 
    mapTypeId : google.maps.MapTypeId.ROADMAP 
    } 
    pode ser ROADMAP, SATELLITE, HYBRID, TERRAIN 
    map = new google.maps.Map(mapDiv, mapOptions); 

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

    //Create the route 
    ser.route({ 'origin': new google.maps.LatLng(-23.563594, -46.654129), 'destination': new google.maps.LatLng(
-23.563672, -46.640396), 'travelMode': google.maps.DirectionsTravelMode.DRIVING},function(res,sts) { 
     if(sts=='OK')ren.setDirections(res);  
    })  

} 

我更新這裏我的代碼，我做只有wayA，這是第一個路點，第二個是latLng預定義的，在那裏你點擊，它獲取latLng並放入'origin'中。

google.maps.event.addListener(map, "click", function(event) { 
      wayA = new google.maps.Marker({ 
       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, 'destination': new google.maps.LatLng(
-23.563672, -46.640396), 'travelMode': google.maps.DirectionsTravelMode.DRIVING},function(res,sts) { 
     if(sts=='OK')ren.setDirections(res);  
    })  

This is my test with the full code

Answer 1

理念： （聽起來好像這是你想要的）

1. click事件偵聽器添加到地圖
2. 當用戶點擊地圖上添加一個可拖動標記（我會添加一個點擊監聽器，以便它們可以通過點擊將其刪除）
3. 當用戶點擊地圖時，seco第二次添加第二個可拖動標記
4. 添加第二個標記時，請使用兩個標記的位置調用directions服務。
5. 如果任一標記被拖動，再次調用方向服務。

（如果你正在嘗試並遇到了問題，代碼或活鏈接將是有益的）

你缺少＃3，＃4

Working example

代碼片段：

var map, ren, ser; 
 
var data = {}; 
 
var data2 = {}; 
 
var marker; 
 
var infowindow; 
 
var doMark = true; 
 
var directionsDisplay; 
 

 
var wayA; 
 
var wayB; 
 

 
//Função de Inicio 
 

 
function goma() { 
 

 
    var mapDiv = document.getElementById('mappy'); 
 

 
    var mapOptions = { 
 
     zoom: 12, 
 

 
     center: new google.maps.LatLng(-23.563594, -46.654239), 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    } 
 
    //Cria o mapa do google, coloca as definições do mapa, como tipo de visualização, pode ser ROADMAP, SATELLITE, HYBRID, TERRAIN 
 
    map = new google.maps.Map(mapDiv, mapOptions); 
 

 

 
    var control = document.createElement('DIV'); 
 
    control.style.padding = '1px'; 
 
    control.style.border = '1px solid #000'; 
 
    control.style.backgroundColor = 'white'; 
 
    control.style.cursor = 'pointer'; 
 
    control.innerHTML = '<img src="http://i47.tinypic.com/2dlp2fc.jpg" border="0" alt="Image and video hosting by TinyPic">'; 
 
    control.index = 1; 
 

 

 
    map.controls[google.maps.ControlPosition.TOP_RIGHT].push(control); 
 

 
    google.maps.event.addDomListener(control, 'click', function() { 
 
    doMark = false; 
 
    markNow(); 
 

 

 
    }); 
 

 
    google.maps.event.addListener(map, "click", function(event) { 
 
    if (!wayA) { 
 
     wayA = new google.maps.Marker({ 
 

 
     position: event.latLng, 
 
     map: map 
 

 
     }); 
 
    } else { 
 
     wayB = new google.maps.Marker({ 
 

 
     position: event.latLng, 
 
     map: map 
 

 
     }); 
 

 
     //Renderiza a rota, o draggable é diz se o waypoint é arrastavel ou não 
 
     ren = new google.maps.DirectionsRenderer({ 
 
     'draggable': true 
 
     }); 
 
     ren.setMap(map); 
 
     ren.setPanel(document.getElementById("directionsPanel")); 
 
     ser = new google.maps.DirectionsService(); 
 

 
     //Cria a rota, o DirectionTravelMode pode ser: DRIVING, WALKING, BICYCLING ou TRANSIT 
 
     ser.route({ 
 
     'origin': wayA.getPosition(), 
 
     'destination': wayB.getPosition(), 
 
     'travelMode': google.maps.DirectionsTravelMode.DRIVING 
 
     }, function(res, sts) { 
 
     if (sts == 'OK') ren.setDirections(res); 
 
     }) 
 

 
    } 
 
    }); 
 
} 
 

 
var html = "<table>" + 
 
    "<tr><td>Nome:</td> <td><input type='text' id='name'/> </td> </tr>" + 
 
    "<tr><td>Endereco:</td> <td><input type='text' id='address'/></td> </tr>" + 
 
    "<tr><td>Tipo:</td> <td><select id='type'>" + 
 
    "<option value='oficina' SELECTED>oficina</option>" + 
 
    "<option value='restaurante'>restaurante</option>" + 
 
    "</select> </td></tr>" + 
 
    "<tr><td></td><td><input type='button' value='Salvar' onclick='saveData()'/></td></tr>"; 
 
infowindow = new google.maps.InfoWindow({ 
 
    content: html 
 
}); 
 

 
google.maps.event.addDomListener(window, 'load', goma);

html, 
 
body { 
 
    height: 100%; 
 
    width: 100%; 
 
}

<script src="http://maps.google.com/maps/api/js"></script> 
 
<div id="mappy" style="float:left;width:70%; height:100%"></div> 
 
<div id="directionsPanel" style="float:right;width:30%;height 100%"></div> 
 
<div> 
 
    <label>Endereco</label> 
 
</div>