Google Maps kliknij wydarzenie na trasie

Question

Próbuję narysować koło, gdziekolwiek kliknę na trasie. Szukałem rozwiązania, jak zrobić klikalną trasę i nie mogę znaleźć niczego przydatnego ... Poniżej znajduje się mój kod. Nie dostaję żadnych błędów po kliknięciu trasy, ale nie utworzono żadnego kręgu.

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

}); 

UPDATE:

kod Praca tworzyć własne kierunki łamaną na podstawie skryptu http://www.geocodezip.com/v3_directions_custom_iconsC.html i oficjalne API przykład Geocodezip za 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); 
    } 

następnie we wniosku directionService dodałem

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

Answer 1

Nie ma żadnego zdarzenia "kliknięcia" na stronie, aby można było renderować polilinię samodzielnie i dodać do niego detektor zdarzeń kliknięcia lub dodać detektor kliknięcia do mapy.

Example of a custom directions renderer

proof of concept fiddle

fragment kodu:

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>