Maps API 中往返此处的路线信息窗口答案

【问题标题】：Directions to/from here infowindow in Maps APIMaps API 中往返此处的路线信息窗口
【发布时间】：2019-04-06 05:39:47
【问题描述】：

我正在尝试在 Google 地图中复制类似的功能，您可以在其中单击鼠标右键，并提供一个选项来指示往返该点的路线。我遇到的困难是与信息窗口进行交互并将纬度/经度传递回去。

侦听器可以很好地创建信息窗口。但我无法弄清楚如何将纬度/经度传递回 javascript（作为起点或目的地），以便我可以在路线服务中使用它。我最终会有第二个标记，它将填充起点/终点中的另一个值。一旦数组有两个值，我将调用方向服务。

我看到的所有示例都需要某种形式的手动输入来定义地址的第二部分。

我对此还是很陌生，所以请放轻松；我已尽力提供最精简的示例代码来演示我的问题。

var mapCanvas = "map-canvas",
	map,
	infowindow = new google.maps.InfoWindow(),
	LocationArr = [],
	o;

google.maps.event.addDomListener(window, "load", function(){
	map = new google.maps.Map(document.getElementById(mapCanvas), {zoom: 13,center: {lat: 53.4723272,lng: -2.2935022}});
    var geocoder = new google.maps.Geocoder;
    google.maps.event.addListener(map, "click", function(o) {
        LocationArr.push(o.latLng);
        var a = new google.maps.Marker({
            position: o.latLng,
            map: map,
        });
		var content =  "<input type='button' name='DirFrom' value='Directions from here' onclick='DirFromHere()' id='Dir_From'>"
					 + "<input type='button' name='DirTo'   value='Directions to here'   onclick='DirToHere()'   id='Dir_To'>"
		infowindow.setContent(content);	
		infowindow.open(map, a);
    });

});
								 
function DirFromHere(LocationArr){
	console.log(LocationArr.length);
}

function DirToHere(LocationArr){
	LocationArr=[];
}

html, body {
	height: 100%;
	width: 100%;
}

#map-canvas {
	position: absolute;
	top:  0%;
	left: 0%;
	width: 100%;
	height: 100%;
}

<html>
	<head>
		<link href="css/styles.css" rel="stylesheet" type="text/css" />
	</head>
	<body>
		<div id="map-canvas"></div>
		<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
		<script src="js/aqrouting.js"></script>
	</body>
</html>

【问题讨论】：

类似this?
这是我见过的最接近的例子，但并不完全；这仍然需要手动输入。另外，我不确定当您按下链接时它是如何得出纬度和经度的。最后，不知道为什么我一直被否决。问题还不够清楚吗？
运行你的代码 sn -p 会产生一个脚本错误。您是否还查看了您的 javascript 控制台是否有其他错误？此外，您的问题是不清楚您遇到的问题以及您希望它如何工作。提供的代码不包含方向请求的实现。这应该在什么时候发生？跟随哪个动作？明确你的问题，并让你的代码反映你所说的你正在尝试做的事情。这也可能会阻止人们投反对票。
我认为脚本错误是因为我遗漏了我的地图 API 密钥？在这个阶段，我对方向服务结束感到满意，因此省略了它。我将在下面完成您的回答，看看我的进展如何。感谢您的帮助和反馈。
是的，很抱歉，脚本错误无论如何都会出现。不知道为什么。无论如何，您有一个工作示例，您现在可以检查并适应您的需求。

标签： javascript google-maps google-maps-api-3 google-maps-markers infowindow

【解决方案1】：

这是一个简单的示例，说明如何做到这一点，仅使用 vanilla Javascript。代码已注释。这应该足以理解它是如何工作的。

var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map, infowindow;
var start, end, pos;

function initialize() {

  directionsDisplay = new google.maps.DirectionsRenderer();

  // Map options
  var center = new google.maps.LatLng(45.07, 7.67);
  var myOptions = {
    zoom: 12,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: center
  }

  // Create map
  map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
  directionsDisplay.setMap(map);

  // Create infowindow
  infowindow = new google.maps.InfoWindow({
    content: '',
    map: map
  });

  // Listen for map click
  google.maps.event.addListener(map, 'click', function(e) {

    // Save current position
    pos = e.latLng;

    // Set infowindow position and open
    infowindow.setPosition(pos);
    infowindow.open(map)
  });

  // Create infowindow buttons
  let btnFrom = document.createElement("button");
  btnFrom.id = 'directionsFrom';
  btnFrom.innerHTML = 'Directions from here'

  let btnTo = document.createElement("button");
  btnTo.id = 'directionsTo';
  btnTo.innerHTML = 'Directions to here'

  // Add DOM listener to DIRECTIONS FROM button
  google.maps.event.addDomListener(btnFrom, 'click', function() {

    // Set start position
    start = pos;
  });

  // Add DOM listener to DIRECTIONS TO button
  google.maps.event.addDomListener(btnTo, 'click', function() {

    // Set end position
    end = pos;

    // Check that start and end position both are an instance of LatLng
    if ((start instanceof google.maps.LatLng) && (end instanceof google.maps.LatLng)) {

      // We have a start and end position so we can request directions
      getDirections();
    }
  });

  // Add the 2 buttons in a DIV
  let contentDiv = document.createElement('div');
  contentDiv.appendChild(btnFrom);
  contentDiv.appendChild(btnTo);

  // Add the DIV as the infowindow content
  infowindow.setContent(contentDiv);
}

// Make a Directions request and display it on the map
function getDirections() {

  var method = 'DRIVING';
  var request = {
    origin: start,
    destination: end,
    travelMode: google.maps.DirectionsTravelMode[method]
  };

  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);

      // Close infowindow
      infowindow.close();
    }
  });
}

initialize();

#map-canvas {
  height: 150px;
}

<div id="map-canvas"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk
"></script>

【讨论】：