我希望能够从 window.google.maps.DirectionsService 调用中引用和/或附加点击事件监听器到 A 和 B 端点标记。
我知道你可以抑制这些标记并创建你自己的(所有与此相关的计算器都建议这样做。我不想要它)，但是你失去了能够拖动标记并让它计算新路线的功能基于在您拖动端点的位置。
我想做的主要事情是覆盖默认信息窗口并显示我自己的自定义信息窗口。不过，第一步是能够连接到标记中。仅仅能够触发点击事件是不够的，我需要访问事件处理程序来覆盖。
这是一个可拖动标记的例子:http://jsbin.com/mekapadigo/1/edit?html,output
我不需要/不想要右边的面板，但我注意到有一个事件正在使用它监听 A 和 B 标记，所以建议也许这是可能的。
最佳答案
这是在端点上附加标记的版本，单击时会显示信息窗口。拖动标记时，标记位置和航路点会反馈到路线服务中。该请求已被限制，因此它不会超过每秒 10 次的查询限制。计算路线后，应将标记移回路线上(留作练习留给您)。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Draggable directions</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: {lat: 40.6, lng: -73.9}
});
var directionsService = new google.maps.DirectionsService;
var directionsDisplay = new google.maps.DirectionsRenderer({
draggable: true,
map: map,
suppressMarkers: true
});
var waypoints = [];
var markerStart = new google.maps.Marker({
position: {lat: 40.851246, lng: -73.875218},
map: map,
draggable:true
});
var infowindowStart = new google.maps.InfoWindow({
content: "Marker Start Info Window"
});
markerStart.addListener('click', function() {
infowindowStart.open(map, markerStart);
});
var markerEnd = new google.maps.Marker({
position: {lat: 40.831916, lng: -73.888947},
map: map,
draggable:true
});
var infowindowEnd = new google.maps.InfoWindow({
content: "Marker End Info Window"
});
markerEnd.addListener('click', function() {
infowindowEnd.open(map, markerEnd);
});
var redisplay = _.throttle(function() {
displayRoute(markerStart, markerEnd, directionsService, directionsDisplay, waypoints);
}, 200);
google.maps.event.addListener(markerStart, 'drag', redisplay);
google.maps.event.addListener(markerEnd, 'drag', redisplay);
directionsDisplay.addListener('directions_changed', function() {
var directions = directionsDisplay.getDirections();
waypoints = directions.request.waypoints;
});
displayRoute(markerStart, markerEnd, directionsService, directionsDisplay, waypoints);
}
function displayRoute(markerStart, markerEnd, service, display, waypoints) {
service.route({
origin: markerStart.getPosition(),
destination: markerEnd.getPosition(),
travelMode: google.maps.TravelMode.DRIVING,
waypoints: waypoints,
avoidTolls: true
}, function(response, status) {
if (status === google.maps.DirectionsStatus.OK) {
waypoints = response.request.waypoints;
display.setDirections(response);
} else {
console.log('Could not display directions due to: ' + status);
}
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
</body>
</html>关于javascript - 将点击事件监听器添加到目录服务端点标记，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33816222/