gpt4 book ai didi

javascript - 在谷歌方向路线上添加 InfoWindow

转载 作者:数据小太阳 更新时间:2023-10-29 05:01:08 25 4
gpt4 key购买 nike

我正在尝试向路线添加信息窗口。有很多示例可以在标记上的事件监听器上添加 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 directions Image

最佳答案

要在路线上找到一个位置并将 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

enter image description here

代码片段:

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>

关于javascript - 在谷歌方向路线上添加 InfoWindow,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30648228/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com