谷歌地图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>