谷歌地图V3可点击驾驶方向(Clickable Driving Direction on Googl

我在做一个谷歌地图项目，需要在其上创建一个路由点击。

我的项目有2个，有一个预定义的纬度和经度，我想通过自己抽的开始和点A和B的结束，不要失去它的功能。

我做了另一个项目，您可以单击绘制路线，但它没有标记，并且不draggabble，这是我的实际项目与完整的代码，我将在这里发表一个简短的代码只能用我的方向。

我想，我的第一次点击的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);    
    })      

}

我更新这里我的代码，我只是做了哇呀，这是第一个航点，第二个是一个预定义的latLng，在那里你点击，它得到的经纬度，并把“原点”里面。

    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);    
    })

这是我测试用的完整代码

概念：（听起来好像这是你想要的）

添加一个click事件侦听到地图
当用户点击地图上添加一个拖动的标记（我会点击监听器添加到它，使他们可以通过点击删除）
当用户点击地图上的第二次添加的第二拖动的标记
加入第二标记时，调用指示服务与两个标记的位置。
如果任一标志被拖到再次调用导航服务。

（如果你正在尝试并遇到了问题，代码或活链接将是有益的）

这是因为丢失＃3，＃4

工作实例

代码片段：

 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>