Google지도 v3에서 클릭 가능한 운전 방향

Question

Google지도 프로젝트를 만들고이를 클릭하는 경로를 만들어야합니다.

내 프로젝트에는 미리 정의 된 lat와 lng가있는 2 포인트가 있으며 포인트 A와 B의 시작과 끝을 혼자서 그려야하며 기능을 잃지 않습니다.

경로를 그리기 위해 클릭 할 수있는 다른 프로젝트를 만들었지 만 표식이없고 단호하지는 않습니다. 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);  
    })  

} 

를 연결처럼 드래그하는 것을 원하는, 내가 다 only 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. 지도
2. 에 클릭 이벤트 리스너를 추가 (이 같은 소리는 당신이 원하는 것입니다) 마커 (나는 클릭 리스너를 추가하여 클릭하여 삭제할 수 있습니다)
3. 사용자가지도를 클릭하면 두 번째 두 번째 마커가 추가되면 두 번째 드래그 마커
4. 을 추가하고 두 마커의 위치를 ​​사용하여 길 찾기 서비스에 전화하십시오.
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>