javascript – 在Google路线上添加InfoWindow

我正在尝试将InfoWindow添加到路线路线.有很多例子可以在标记上的事件监听器上添加InfoWindow.

但是,如何将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);

解决方法

要在路径上找到位置并在其中放置infoWindow,请解析路径( the details are described in the documentation).获取路线上的位置,并使用该位置调用infowindow的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

代码段：

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,Coventry CV5 9BP,UK");
}

function calcRoute(start,end) {
  var request = {
    origin: start,destination: end,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"></script>
<div id="map-canvas"></div>

原文链接：https://www.f2er.com/js/155723.html

javascript – 在Google路线上添加InfoWindow

解决方法

猜你在找的JavaScript相关文章