Question

我希望能够从window.google.maps.DirectionsService调用中引用和/或附加单击事件侦听器到A和B端点标记。

我知道你可以压制这些标记并创建你自己的（所有与此相关的堆栈溢出建议。我不想要它），但你失去了能够拖动标记并让它计算新路径的功能在拖动端点的位置。

我想要做的主要是覆盖默认的infoWindow并显示我自己的自定义。第一步是能够挂钩标记。只是能够触发点击事件是不够的，我需要访问事件处理程序来覆盖。

以下是可拖动标记的示例：http://jsbin.com/mekapadigo/1/edit?html,output

我不需要/想要右边的面板，但是我注意到有一个事件正在使用它监听A和B标记，所以建议也许这是可能的。

Answer 1

创建自己的标记时，不会失去在拖动端点时重新计算路径的功能。我认为https://developers.google.com/maps/documentation/javascript/examples/directions-draggable的例子可以满足您的需求。

以下是该示例中的一些修改代码。您可以收听'directions_changed'事件，并在侧面板中显示您喜欢的任何内容：

<!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%;
			float: left;
			width: 63%;
			height: 100%;
		}
		#right-panel {
			float: right;
			width: 34%;
			height: 100%;
		}
		#right-panel {
			font-family: 'Roboto','sans-serif';
			line-height: 30px;
			padding-left: 10px;
		}

		#right-panel select, #right-panel input {
			font-size: 15px;
		}

		#right-panel select {
			width: 100%;
		}

		#right-panel i {
			font-size: 12px;
		}

		.panel {
			height: 100%;
			overflow: auto;
		}
	</style>
</head>
<body>
<div id="map"></div>
<div id="right-panel">
	<p>Total Distance: <span id="total"></span></p>
	<p>Your custom information would go here...</p>
</div>
<script>
	// Modified from: https://developers.google.com/maps/documentation/javascript/examples/directions-draggable
	// For so question: http://stackoverflow.com/questions/33816222/add-click-eventlisteners-to-directionservice-endpoint-markers
	function initMap() {
		var map = new google.maps.Map(document.getElementById('map'), {
			zoom: 8,
			center: {lat: 40.6, lng: -73.9}
		});

		var directionsService = new google.maps.DirectionsService;
		var directionsDisplay = new google.maps.DirectionsRenderer({
			draggable: true,
			map: map,
		});

		directionsDisplay.addListener('directions_changed', function() {
			// This is where you would do your custom processing
			computeTotalDistance(directionsDisplay.getDirections());
		});
		displayRoute({lat: 40.763637, lng:-73.972238}, {lat: 40.849651, lng:-73.877270}, directionsService,
			directionsDisplay);
	}

	function displayRoute(origin, destination, service, display) {
		service.route({
			origin: origin,
			destination: destination,
			travelMode: google.maps.TravelMode.DRIVING,
			avoidTolls: true
		}, function(response, status) {
			if (status === google.maps.DirectionsStatus.OK) {
				display.setDirections(response);
			} else {
				alert('Could not display directions due to: ' + status);
			}
		});
	}

	function computeTotalDistance(result) {
		var total = 0;
		var myroute = result.routes[0];
		for (var i = 0; i < myroute.legs.length; i++) {
			total += myroute.legs[i].distance.value;
		}
		total = total / 1000;
		document.getElementById('total').innerHTML = total + ' km';
	}
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap"
        async defer></script>
</body>
</html>

Answer 2

以下是附加到端点的标记的版本，单击时会显示信息窗口。拖动标记时，标记位置和航点将反馈到路线服务中。该请求受到限制，因此它不会超过每秒10个查询限制。计算路线后，应将标记移回路线（留作练习）。

＆＃13;

<!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>

＆＃13;

将click事件清单添加到directionService端点标记

2 个答案: