<form action="http://maps.google.com/maps" method="get" target="_blank">
<label for="saddr">Enter your location</label>
<input type="text" name="saddr" />
<input type="hidden" name="daddr" value="350 5th Ave New York, NY 10018 (Empire State Building)" />
<input type="submit" value="Get directions" />
</form>
saddr = 用于输入起点地址的空白输入框
daddr = 硬编码的终点地址
输入地址并按下按钮,将打开包含路线信息的弹出窗口。不输入地址,只会打开终点地址的地图。
实时演示
感谢这段代码片段,
我刚在我的一个网站上使用了它,这个网站是我为我所在的冰壶俱乐部维护的,它运行得非常完美,不需要做太多调整就能使其正常工作,
这个列表中很好的补充
Al
真有趣,这正是我今天需要的!而且我甚至没有在寻找它……
– 感谢!
如何将它添加到一个按钮上,当点击按钮时会弹出该表单?
我会使用 jQuery。将它包装在一个 id 为 ‘formpp’(用于表单弹出)的 div 中,然后尝试类似以下内容,
$(‘button.popup’).click(function(){
if($(‘#formpp’).is(‘:visible’)){
$(‘#formpp’).hide();
} else {
$(‘#formpp’).show();
}
});
现在,每当你点击带有 ‘popup’ 类别的按钮时,‘formpp’ 将会显示(如果它隐藏)或隐藏(如果它显示)。你需要确保在任何你正在使用的文档中都引入了 jQuery。
@Troy – 你的问题的答案 在这里。
在 Google 搜索了一周后,我拼凑了一些 js 代码。在我无法使其正常工作后,我将它发布在 stackoverflow 上,一位贡献者很友好地为我做了最后的调整(我标记了正确答案)。
我迫不及待地想开始上学,这样我就可以停止在论坛上寻求帮助,并真正学习这些东西。
你好 Chris 和大家!
我真的很喜欢这些内容,但我真的想知道我是否可以将它用于商业用途,比如餐馆的首页?
有人知道 Google 地图内容是否有版权吗?
来自德国的的问候,Gourmador。
这是一个不错的代码片段;但是,它无法通过 W3C 验证。以下是一个通过验证的代码片段
http://malevolent.com/weblog/archive/2005/05/01/add-google-maps/
它几乎完全相同;但是,它缺少 target=”_blank” 并将输入包装在一个 p 标签中以进行验证。
这很好,但是如果我们在我们的网站上使用 Google 地图
关于获取路线的代码不是非常清楚
希望有一个清晰的解决方案
谢谢!
如果可能的话,在 Lightbox 中打开弹出的 Google 地图窗口会很棒。
欢呼!
是的,有没有办法让结果显示在模态弹出窗口中?
这真的很棒!
我刚使用它,它在土耳其运行良好。
谢谢。
谢谢,这非常有用。
如何以公里为单位显示距离?
我使用 iframe 提交表单,表单的 target 属性为 iframe。
喜欢这篇文章和功能!我以后肯定会在我创建的任何网站上使用它。
谢谢 :-)
很棒!谢谢。
很酷……确实很酷……我刚浏览你的网站,找到了这个……接下来我将代码复制到我的记事本中,发现了我想要的东西……感谢你的指导……
嗨,我喜欢 Google 导航表单,但表单缺少表单标签,因此屏幕阅读器无法读取它。
谢谢!能够直接在网站上使用路线小部件而不是让用户点击几下才能进入 Google 地图,真是太好了。
这正是我一直在寻找的。非常感谢你的分享。你真的帮了我的大忙。
我希望人们能够将他们的地址输入文本框,按提交,然后在我的页面上显示结果,而不是直接跳转到 maps.google.com。这可以做到吗?
有没有办法在用户提交地址后在我的网站上显示行车路线?
谢谢。这很棒!我也想知道如何在我用户提交地址后在我的网页上显示路线结果。就像这个网站一样(我知道它是荷兰语,但它是我遇到的唯一一个)。谢谢
http://m.diks.nl/app/vind-ons/664589/2/
不错,但是,我想知道它如何在同一个页面上工作,而不是重定向到 Google 地图 URL。我实际上正在寻找地图搜索 API。
你好,我正在尝试使用这个搜索框,但我希望在指定的页面上使用它,我将其命名为“Locate”,但我无法通过这种方式做到,没有搜索框出现在我可以输入数据的区域。如何创建一个 HTML 搜索框,以便仅在接受 HTML 的这些页面中使用它?
非常感谢!
我爱你。说真的,总是很棒的信息。谢谢!
刚刚节省了我一个小时的时间。太棒了。
我刚试了演示——运行得很好,但它显示为“飞往英国伦敦——美国纽约,往返机票 670 美元”。
值得花这个钱来拜访你吗,Chris?哈哈;)
感谢发布这段代码片段
saddr = 用于输入起点地址的空白输入框
daddr = 硬编码的终点地址
我有两个路线框,需要再添加两个。但是新的路线框无法工作。
当我仔细查看时,编辑器在代码中添加了一个“2”
saddr2 = daddr2= 这会导致它崩溃……(细节决定成败!)
它在十进制纬度和经度值下效果很好 :)
… input type=”hidden” name=”daddr” value=”40.7499839,-74.0180638″ …
完美,正是我需要的。谢谢。
@Raquel 我也使用纬度和经度值。但我如何使用纬度和经度值显示自定义标题,因为它在标题中显示这些值
非常棒的文章!非常感谢
超级小工具——感谢提供如此简单易用的代码!
有人知道如何更改它,以便用户可以从当前位置获取路线,而不是输入地址吗?
喜欢这个代码,非常有用,但我有一个问题。有没有办法将代码改为 https 而不是 http?我想把它放在一个 https 网站上,当在那个网站上时,它会告诉你你正在将信息提交给“未知的第三方,你是否希望继续”。虽然我知道这段代码实际上并没有去任何地方,只是通过代码,但看到这个文本出现会让很多人感到紧张。
自己解决了问题。所以,如果你正在运行一个 https 网站,并且想运行这段代码,只需将代码中的 http 更改为 https://maps.google… 然后像往常一样继续剩下的代码。
只要用户是从提供位置的设备(连接到 Wi-Fi 的计算机或已授权位置服务的智能手机)上点击链接,以下 URL 方案将自动生成路线,而无需用户输入其当前位置
https://www.google.com/maps/dir/CURRENT+LOCATION/1234+Address+Avenue+E,+City,+State+77840
通过包含字符串
Current+Location
,Google 将获取当前位置并生成路线(由/dir/
前缀调用)从用户的当前位置!这代码很好。但是有没有办法让带有路线的 地图出现在 iframe 中而不是单独的网页上?我一直试图让它出现在 iframe 中,但没有成功。
提前感谢。
你好,
我是 HTML 代码新手,但有人知道如何使用浏览器地理位置作为 saddr 吗?
谢谢