Google Maps click to route on rotası

Question

Güzergahı tıkladığım her yerde çember çizmeye çalışıyorum. Tıklanabilir bir rotanın nasıl yapılacağı konusunda bir çözüm aradım ve yararlı bir şey bulamadım ... Aşağıda kodum var. Rotaya tıkladığımda hiçbir hata görmüyorum, ancak daire oluşturulmuyor.

directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions); 

//direction service request here... 

google.maps.event.addListener(directionsDisplay, 'click', function(event) { 

var routeClick = new google.maps.Circle({ 
    center: event.latLng, //center where you click 
    radius: 500, 
    strokeColor: "#0000FF", 
    strokeOpacity: 0.8, 
    strokeWeight: 2, 
    fillColor: "#0000FF", 
    fillOpacity: 0.4 
}); 

routeClick.setMap(map); 

}); 

GÜNCELLEME: Geocodezip senaryosu http://www.geocodezip.com/v3_directions_custom_iconsC.html ve resmi API örnek temelinde kendi tarifi çoklu çizgiyi oluşturmak için kod Çalışma

https://developers.google.com/maps/documentation/javascript/examples/elevation-paths

// Draw the path 
    function drawPath(path) { 
     // Display a polyline of the elevation path. 
     var pathOptions = { 
     path: path, 
     strokeColor: '#0000CC', 
     strokeWeight: 5, 
     opacity: 0.4, 
     map: map 
     } 
     routePolyline = new google.maps.Polyline(pathOptions); 
    } 

sonra directionService isteğinde ben

eklendi

directionService.route(request, function(result, status) { 
    var path = result.routes[0].overview_path; 
    drawPath(path); 
}); 

Answer 1

Çoklu çizgiyi kendini işlemek ve buna bir tıklama olay dinleyicisi eklemek veya haritaya bir tıklama dinleyici ekleyebilirsiniz DirectionsRenderer

üzerinde hiçbir 'tık' olayı yoktur.

Example of a custom directions renderer

proof of concept fiddle

kod parçacığı:

var infowindow = new google.maps.InfoWindow(); 
 
var directions = new google.maps.DirectionsService(); 
 
var renderer = new google.maps.DirectionsRenderer({ 
 
    suppressPolylines: true, 
 
    infoWindow: infowindow, 
 
}); 
 
var map; 
 

 
function initialize() { 
 
    var mapOptions = { 
 
    zoom: 13, 
 
    center: new google.maps.LatLng(40.7482333, -73.8681295), 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }; 
 

 
    map = new google.maps.Map(document.getElementById('map'), mapOptions); 
 

 
    google.maps.event.addDomListener(document.getElementById('go'), 'click', 
 
    route); 
 

 
    var input = document.getElementById('from'); 
 
    var autocomplete = new google.maps.places.Autocomplete(input); 
 
    autocomplete.bindTo('bounds', map); 
 
    route(); 
 
} 
 

 
function route() { 
 
    var request = { 
 
    origin: document.getElementById('from').value, 
 
    destination: '51 St, New York, NY 10022, USA', 
 
    travelMode: google.maps.DirectionsTravelMode.WALKING 
 
    }; 
 

 
    var panel = document.getElementById('panel'); 
 
    panel.innerHTML = ''; 
 
    directions.route(request, function(response, status) { 
 
    if (status == google.maps.DirectionsStatus.OK) { 
 
     renderer.setDirections(response); 
 
     renderer.setMap(map); 
 
     renderer.setPanel(panel); 
 
     renderDirectionsPolylines(response); 
 
     console.log(renderer.getDirections()); 
 
    } else { 
 
     renderer.setMap(null); 
 
     renderer.setPanel(null); 
 
    } 
 

 
    }); 
 

 
} 
 

 
var polylineOptions = { 
 
    strokeColor: '#C83939', 
 
    strokeOpacity: 1, 
 
    strokeWeight: 4 
 
}; 
 
var polylines = []; 
 
function renderDirectionsPolylines(response) { 
 
    for (var i=0; i<polylines.length; i++) { 
 
    polylines[i].setMap(null); 
 
    } 
 
    var legs = response.routes[0].legs; 
 
    for (i = 0; i < legs.length; i++) { 
 
    var steps = legs[i].steps; 
 
    for (j = 0; j < steps.length; j++) { 
 
     var nextSegment = steps[j].path; 
 
     var stepPolyline = new google.maps.Polyline(polylineOptions); 
 
     for (k = 0; k < nextSegment.length; k++) { 
 
     stepPolyline.getPath().push(nextSegment[k]); 
 
     } 
 
     polylines.push(stepPolyline); 
 
     stepPolyline.setMap(map); 
 
     // route click listeners, different one on each step 
 
     google.maps.event.addListener(stepPolyline, 'click', function(evt) { 
 
     infowindow.setContent("you clicked on the route<br>" + evt.latLng.toUrlValue(6)); 
 
     infowindow.setPosition(evt.latLng); 
 
     infowindow.open(map); 
 
     }) 
 
    } 
 
    } 
 
} 
 
google.maps.event.addDomListener(window, 'load', initialize);

html, 
 
body { 
 
    height: 100%; 
 
    padding: 0; 
 
    margin: 0; 
 
    color: black; 
 
    font-family: arial, sans-serif; 
 
    font-size: 13px; 
 
} 
 
#map { 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 50%; 
 
} 
 
#panel-wpr { 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 50%; 
 
    right: 0; 
 
    overflow: auto; 
 
} 
 
#panel { 
 
    font-family: arial; 
 
    padding: 0 5px; 
 
} 
 
#info { 
 
    padding: 5px; 
 
} 
 
#from { 
 
    width: 90%; 
 
    font-size: 1.2em; 
 
} 
 
.adp-directions { 
 
    width: 100%; 
 
} 
 
.input { 
 
    background-color: white; 
 
    padding-left: 8px; 
 
    border: 1px solid #D9D9D9; 
 
    border-top: 1px solid silver; 
 
    -webkit-border-radius: 1px; 
 
    -moz-border-radius: 1px; 
 
    border-radius: 1px; 
 
} 
 
.time { 
 
    margin: 0; 
 
    height: 17px; 
 
    border: 1px solid; 
 
    border-top-color: #CCC; 
 
    border-right-color: #999; 
 
    border-left-color: #999; 
 
    border-bottom-color: #CCC; 
 
    padding: 2px 15px 1px 1px; 
 
} 
 
button { 
 
    border: 1px solid #3079ED; 
 
    color: white; 
 
    background-color: #4D90FE; 
 
    background-image: -webkit-gradient(linear, left top, left bottom, from(#4D90FE), to(#4787ED)); 
 
    background-image: -webkit-linear-gradient(top, #4D90FE, #4787ED); 
 
    background-image: -moz-linear-gradient(top, #4D90FE, #4787ED); 
 
    background-image: -ms-linear-gradient(top, #4D90FE, #4787ED); 
 
    background-image: -o-linear-gradient(top, #4D90FE, #4787ED); 
 
    background-image: linear-gradient(top, #4D90FE, #4787ED); 
 
    filter: progid: DXImageTransform.Microsoft.gradient(startColorStr='#4d90fe', EndColorStr='#4787ed'); 
 
    display: inline-block; 
 
    min-width: 54px; 
 
    text-align: center; 
 
    font-weight: bold; 
 
    padding: 0 8px; 
 
    line-height: 27px; 
 
    -webkit-border-radius: 2px; 
 
    -moz-border-radius: 2px; 
 
    border-radius: 2px; 
 
    -webkit-transition: all 0.218s; 
 
    -moz-transition: all 0.218s; 
 
    -o-transition: all 0.218s; 
 
    transition: all 0.218s; 
 
} 
 
#info div { 
 
    line-height: 22px; 
 
    font-size: 110%; 
 
} 
 
.btn {} #panel-wpr { 
 
    border-left: 1px solid #e6e6e6; 
 
} 
 
#info { 
 
    border-bottom: 1px solid #E6E6E6; 
 
    margin-bottom: 5px; 
 
} 
 
h2 { 
 
    margin: 0; 
 
    padding: 0; 
 
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script> 
 
<title>Google Maps JavaScript API v3 Example: Transit</title> 
 
<div id="transit-wpr"> 
 
    <button id="transit">Toggle transit layer</button> 
 
</div> 
 
<div id="map"></div> 
 
<div id="panel-wpr"> 
 
    <div id="info"> 
 
    <div> 
 
     <label>from:</label> 
 
     <input class="input" id="from" value="Grand Central 42, NY"> 
 
    </div> 
 
    <div> 
 
     <label>to:</label> 
 
     <strong>51 St, New York, NY 10022, USA</strong> 
 
    </div> 
 
    <div class="btn"> 
 
     <button id="go">Get Directions</button> 
 
    </div> 
 
    </div> 
 
    <div id="panel"></div> 
 
</div>