Question

我正在尝试在Google Maps中复制类似的功能，右键单击该功能，并提供了指向/从该点出发的路线的选项。我正在努力与信息窗口互动，并将纬度/经度传递回来。

侦听器可以正常创建信息窗口。但我无法解决如何将经/纬度传递回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>

Answer 1

这里是一个简单的示例，说明了如何仅使用原始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"></script>

Maps API中信息窗口的往返路线

1 个答案: