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。如果你试图点击＆＃34;（calcola percorso）＆＃34;，靠近＆＃34; Mezzi pubblici＆＃34;出现一个输入框。这是起始地址（saddress）参数，因为＆＃34; Go＆＃34;按钮将带您进入谷歌地图网站和Transit服务（并通过Transit将您带到一个＆＃34;硬编码的＆＃34;目的地地址，从您输入的地址开始）。

现在，是否可以直接在使用上述脚本调用的地图中启动Transit（无需访问Google地图网站）？让用户在输入表单中输入他们的地址，点击＆＃34; Go＆＃34;这将是非常棒的。然后让上面的地图变成＆＃34;转过来＃34;在Transit模式下，我指定了目的地地址，但是用户选择的起始地址（来自输入表格）。

Answer 1

是的，你可以这样做。您需要使用Maps API中的Directions service。这是一个example page。

好的，到目前为止一切顺利！我看了你最新的代码，你肯定是在正确的轨道（双关语）。正如我在评论中提到的，问题是你为select / option case和text输入表单调用了相同的calcRoute()函数。

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

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

然后更改您的select元素以传递其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()，并从相应的表单中调用每个函数。这些将分别设置适当的输入地址，然后调用一个公共函数来完成其余的工作。无论哪种方式都可以做同样的工作。

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

1 个答案: