在 Google 路线上添加 InfoWindow

Posted 2023-05-06

【中文标题】在 Google 路线上添加 InfoWindow

【英文标题】：Adding InfoWindow on Google directions route

【发布时间】：2015-08-19 07:46:11

【问题描述】：

我正在尝试向路线路线添加信息窗口。有很多示例可以在标记上的事件侦听器上添加 InfoWindow。

但是如何移动信息窗口以显示从一个标记到另一个标记的实际计划路线。之前已经有人尝试问过这个问题但没有回应（InfoWindow on Directions Route）。

不管怎样，我做了很多谷歌搜索，只发现了一个与此类似的问题，但再次没有任何回应。

我在回调中的标记事件上尝试了infowindow.open(map,this)，但它会在标记位置打开 InfoWindow。它只是我想显示类似于谷歌的持续时间和距离。类似于附图中的内容

var infowindow2 = new google.maps.InfoWindow();
distanceService.getDistanceMatrix(distanceRequest, function (response, status) 
    if (status == "OK") 
      infowindow2.setContent(response.rows[0].elements[0].distance.text + "<br>" + response.rows[0].elements[0].duration.text + " ")
    
    else 
      alert("Error: " + status)
    
  )
infowindow2.open(map, this);

【问题讨论】：

Google Maps click event on route的可能重复

如果您只是想在路线上的某个点上打开一个信息窗口（而不是点击一下），您只需要一个位置即可打开它。

您好，我如何定位路线上某个点的位置？

解析来自directionsService的响应。

你的意思是这样的 infowindow2.open(map, response);

【参考方案1】：

要在路线上查找位置并在其中放置一个 infoWindow，请解析路线 (the details are described in the documentation)。获取沿途的位置并使用该位置调用信息窗口的 setPosition 方法。

function calcRoute(start, end) 
  var request = 
      origin:start,
      destination:end,
      travelMode: google.maps.DirectionsTravelMode.DRIVING
  ;
  directionsService.route(request, function(response, status) 
    if (status == google.maps.DirectionsStatus.OK) 
      directionsDisplay.setDirections(response);
      var step = 1;
      var infowindow2 = new google.maps.InfoWindow();
      infowindow2.setContent(response.routes[0].legs[0].steps[step].distance.text + "<br>" + response.routes[0].legs[0].steps[step].duration.text + " ");
      infowindow2.setPosition(response.routes[0].legs[0].steps[step].end_location);
      infowindow2.open(map);
    
  );

如果你真的需要路线的中点，请看Midpoint of route in google maps

proof of concept fiddle

代码 sn-p：

var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;

function initialize() 
  directionsDisplay = new google.maps.DirectionsRenderer();
  var chicago = new google.maps.LatLng(41.850033, -87.6500523);

  var mapOptions = 
    zoom: 7,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: chicago
  
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  directionsDisplay.setMap(map);
  calcRoute("67 The Windmill Hill, Allesley, Coventry CV5 9FR, UK", "26 Rosaville Crescent, Allesley, Coventry CV5 9BP, UK");


function calcRoute(start, end) 
  var request = 
    origin: start,
    destination: end,
    travelMode: google.maps.DirectionsTravelMode.DRIVING
  ;
  directionsService.route(request, function(response, status) 
    if (status == google.maps.DirectionsStatus.OK) 
      directionsDisplay.setDirections(response);
      var step = Math.floor(response.routes[0].legs[0].steps.length / 2);
      var infowindow2 = new google.maps.InfoWindow();
      infowindow2.setContent(response.routes[0].legs[0].steps[step].distance.text + "<br>" + response.routes[0].legs[0].steps[step].duration.text + " ");
      infowindow2.setPosition(response.routes[0].legs[0].steps[step].end_location);
      infowindow2.open(map);
    
  );


google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#map-canvas 
  height: 100%;
  margin: 0px;
  padding: 0px


#panel 
  position: absolute;
  top: 5px;
  left: 50%;
  margin-left: -180px;
  z-index: 5;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #999;

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

【参考方案2】：

您可以使用overview_path 数组来查找路径的中心点。然后将其设置为信息窗口位置。

var center_point = response.routes[0].overview_path.length/2;

var infowindow = new google.maps.InfoWindow();
infowindow.setContent(response.routes[0].legs[0].distance.text + "<br>" + response.routes[0].legs[0].duration.text + " ");
infowindow.setPosition(response.routes[0].overview_path[center_point|0]);
infowindow.open(map);

【讨论】：

这很有帮助，但应该是评论