与用户激活公交谷歌地图API V3输入起始地址

这是我现在使用调用谷歌地图API代码：与用户激活公交谷歌地图API V3输入起始地址

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）参数，因为“Go”按钮会将您带到Google地图网站和Transit服务（并通过Transit将您输入的“硬编码”目标地址引导至您。

现在，是否可以直接在上面的脚本调用的地图中启动Transit（无需转到Google Maps网站）？让用户在输入表单中输入他们的地址，点击“开始”，然后让上面的地图在Transit模式下“转向”，并指定目标地址，但用户选择的起始地址（来自输入表单）。

来源

2013-04-27 MultiformeIngegno

是的，你可以做到这一点。您需要在Maps API中使用Directions service。这是一个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()，然后从各自的表单调用每个函数。这些都会根据需要设置输入地址，然后调用一个通用函数来完成剩余的工作。无论哪种方式会做同样的工作。

来源

2013-04-27 20:53:16

感谢您的链接。你能帮我一下吗？我开始做一些测试，这是我现在所拥有的：http://ffio.it/test.html 正如你所看到的

嘿，那是很棒的进步！工作很好。文本输入表单的问题在于，您调用了与select/option相同的'calcRoute（）'函数，但是此函数不会从文本输入字段获取地址，它使用select值。我不能在这个评论中做很多代码格式化，所以我会稍微更新一下答案... – 2013-04-28 00:02:53

Eheh，我尽我所能来实现目标。另外，如果我真的是一个JavaScript的初学者！ Google Maps API文档写得很好。 :) – MultiformeIngegno 2013-04-28 00:05:05

与用户激活公交谷歌地图API V3输入起始地址

回答

相关问题