谷歌地圖在路線上點擊事件

Question

我試圖畫出一個無論我點擊路線的地方。我尋找一個解決方案，如何使路由可點擊，並找不到有用的東西...下面是我的代碼。當我點擊路線但沒有創建圓圈時，我不會收到任何錯誤。

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：

工作的代碼基礎上Geocodezip的劇本http://www.geocodezip.com/v3_directions_custom_iconsC.html和官方API例如創建自己的方向折線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); 
    } 

然後在directionService請求我加

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

Answer 1

DirectionsRenderer

沒有「單擊」事件您可以自己渲染折線併爲其添加單擊事件偵聽器或將單擊偵聽器添加到地圖。

Example of a custom directions renderer

proof of concept fiddle

代碼片段：

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>