javascript - 使用用户输入的起始地址在 Google Maps API v3 上激活 Transit

Question

这是我现在用来调用 Google Maps API 的代码:

function initialize() {
var myLatlng = new google.maps.LatLng(41.88994,12.51383);

var mapOptions = {
zoom: 16,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Studio medico'
});
}

function loadScript() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://maps.googleapis.com/maps/api/js?sensor=false&' + 'callback=initialize';
document.body.appendChild(script);
}

window.onload = loadScript;

您可以现场观看here 。如果您尝试单击“(calcola percorso)”，则会在“Mezzi pubblici”附近出现一个输入框。这是起始地址 (saddress) 参数，因为“前往”按钮会将您带到 Google map 网站和 Transit 服务(并通过 Transit 将您带到从您键入的地址开始的“硬编码”目的地地址)。

现在，是否可以直接在使用上述脚本调用的 map 中启动 Transit(无需访问 Google map 网站)？如果用户在输入表单中输入他们的地址，单击“开始”，然后将上面的 map “转换”为公交模式，其中目的地地址是我指定的，但起始地址是由用户选择的(来自输入表格)。

Answer 1

是的，你可以做到这一点。您需要使用Directions service在 map API 中。这是 example page .

好的，到目前为止一切顺利!我查看了您的最新代码，您绝对走在正确的轨道上(双关语)。正如我在评论中提到的，问题在于您为选择/选项情况和文本输入表单调用相同的 calcRoute() 函数。

您可以针对每种情况将其分解为单独的函数，或者使用相同的函数，但只需传入每种情况的元素 ID。为此，我将为您的文本输入字段提供一个 ID:

<input type="text" id="startText" name="start" placeholder="Start address">

然后更改您的选择元素以传递其 id:

<select id="start" onchange="calcRoute('start');">

并更改文本输入形式:

<form method="get" id="start" onsubmit="calcRoute('startText');" action="#" style="display:inline">

现在只需更改 calcRoute() 的开头即可:

function calcRoute( input ) {
    var start = document.getElementById(input).value;
    ... remainder of existing code here ...
}

或者，正如我在评论中提到的，您可以将它们分解为单独的函数，也许是 calcRouteFromSelect() 和 calcRouteFromText() ，并从各自的形式。这些将分别设置适当的输入地址，然后调用一个通用函数来完成其余的工作。无论哪种方式都会做同样的工作。