添加Google地图行车路线到您的网站


尽管有很多地图应用程序和服务可以帮助您从A点到B点,但最终的地图之王是Google Maps。我在我的电脑,平板电脑上使用它,90%的时间都在我的智能手机上。它拥有最好的数据,最多的导航和路由选项以及街景和步行,骑自行车和公共交通信息等酷炫功能。

但是,如果您需要在Google网站之外使用地图或路线,该怎么办?假设您有自己的婚礼网站或个人博客,客人可以访问您的网站,输入他们将来自的地址并自动获取前往活动地点的路线!

嗯,有几个你可以采取哪些措施来实现这一目标。最简单的方法是使用Google地图生成的嵌入代码将地图简单地嵌入到您的网页中。第二种方式更具技术性,但更具可定制性和动态性。我将在下面提到这两种方法。

嵌入谷歌地图

如果你只想显示从一个地方到另一个地方的路线,最简单的办法是嵌入你想要的地图使用嵌入代码查看。首先,继续在Google地图中设置您想要的任何方向,然后点击页面右下角的齿轮图标。

share or embed map

点击分享或嵌入地图,然后点击嵌入地图标签。在这里,您可以为地图选择一个尺寸,然后复制iframe代码并将其放到您喜欢的任何网页上。

embed map

唯一的缺点是这种方法是用户只看到静态地图。在下面的第二种方法中,您可以创建一个表单,用户可以键入任何起始地址,并生成从该地址到您选择的目标地址的地图。

创建Google地图表单

h2>

为了说明第二种方法的含义,请在下面的框中输入美国地址,以获取从您所在位置到我家的路线:

输入您的起始地址:

酷吧?您可以在任何网站,博客或任何可以放入HTML代码的地方轻松创建这个小表格!这对于小型企业网站也很有用,因为你可以把它放在你的联系页面上,人们可以快速获得方向,而不必复制你的地址,打开一个新窗口,然后输入他们的起始地址。

那么我们如何创建这个修改后的获取方向框?首先,我们需要获取Google用于指示的网址的正确语法。幸运的是,我们可以通过获取两个地方之间的路线,然后只是从地址栏复制URL来解决这个问题。您还可以点击页面右下角的微小齿轮图标,然后选择分享或嵌入地图

share or embed map

“共享”链接标签将包含网址,该网址与浏览器地址栏中的网址相同。我已经继续并粘贴下面的整个网址,只是为了向您展示它的样子。

3

https://www.google.com/maps/dir/3600+Thorp+Springs+Dr,+Plano,+TX+75025 ,+ USA / 854 + Deerfield + Rd,+ Allen,+ TX + 75013,+ USA / @ 33.1125686,-96.7557749,13z / data =!3m1!4b1!4m13!4m12!1m5!1m1!1s0x864c3d45018517a5:0xbabd3c91a1321997!2m2! 1D-96.762484!2d33.08947!1M5!1M1! 1s0x864c16d3018a7f4f:0xab2052b5786cd29f2平方米1D-96.666151 2d33.133892

糟糕!!那太长了!那里有很多东西,其中大部分都没有任何意义!谷歌地图URL参数过去非常简单易行,但新的URL结构非常复杂。值得庆幸的是,您仍然可以使用旧参数,Google会自动将它们转换为新版本。要了解我的意思,请查看以下链接。

http://maps.google.com/maps?saddr=start&daddr=end

来吧,试一试。在起始地址和结束地址的引号中输入地址,然后将URL粘贴到浏览器中!我取代了我的家乡新奥尔良,并以德克萨斯州休斯顿结束,所以这就是我的谷歌地图方向网址:

http://maps.google.com/maps?saddr="new orleans,la“& daddr =”houston,tx“

它有效!但是,正如您所看到的,一旦地图完全加载,Google地图会将链接转换为更复杂的内容。好了,现在我们有了一个可以传递到Google地图的合理网址,我们需要创建一个包含两个字段的简单表单,一个用于起始地址,另一个用于目标地址。

如果你希望人们只需输入他们的地址并获取前往您所在地的路线,然后我们就会希望隐藏第二个字段并将其设置为目标地址。

< form action =“ http://maps.google.com/maps“method =”get“target =”_ blank“>
输入您的起始地址:
< input type =”text“name =”saddr“/&gt ;< input type =“hidden”name =“daddr”value =“854 Deerfield Rd,Allen,TX”/>
< input type =“submit”value =“get directions”/&gt ;< / form>

查看上面的代码。第一行从表单开始,并表示单击提交按钮时,数据应发送到maps.google.com/maps。 target = blank表示我们希望在新窗口中打开结果。然后我们有一个起始地址的文本框,它是空白的。

隐藏第二个文本框,值是我们想要的目标地址。最后,有一个标题为“获取路线”的提交按钮。现在当有人输入他们的地址时,他们会得到这个:

maps directions

您可以使用一些额外的参数自定义路线和地图。例如,假设您不希望默认视图是地图,而是希望它是卫星并显示流量

http://maps.google.com/maps?saddr=%22new+orleans,+la%22&daddr=%22houston,+tx%22&ie=UTF8&t=h&z=7&layer=t

注意URL中的layer = tt = h字段。 layer = t用于流量层,t = h表示混合地图! t也可以设置为m用于法线贴图,k用于卫星,p用于地形。 z是缩放级别,您可以将其从1更改为20.在上面的网址中,它设置为7.只需将这些内容添加到您的最终网址,您就可以获得高度自定义的Google地图获取您网站上的路线表单!

有任何问题,发表评论,我会尽力帮助!享受!

12vacation Android (12渡假) - 必有的免费旅游应用程序

相关文章:


31.12.2014