如何将地址转换为Google Maps Link(NOT MAP)


297

在网路上搜寻(Google搜寻)一段时间后,我找不到任何需要以下网址的地址:

哥伦比亚特区华盛顿市,宾夕法尼亚大道1200号,20003

并将其转换为可点击的链接:

http://maps.google.com/maps?f=q&source=s_q&hl=zh-CN&q=1200+宾夕法尼亚州+ Ave + SE,+华盛顿,+ District + of + Columbia,+ 20003&sll = 37.0625,-95.677068&sspn = 44.118686,114.169922922 &ie = UTF8&cd = 1&geocode = FT5MUQIdIDlp-w&split = 0&ll = 38.882147,-76.99017&spn = 0.01064,0.027874&z = 16&iwloc = A

首选jQuery或PHP或仅此方面的任何有用信息。

Answers:


680

这个怎么样?

https://maps.google.com/?q=1200 Pennsylvania Ave SE,华盛顿哥伦比亚特区,20003

https://maps.google.com/?q=term

如果您有经纬度,请使用以下网址

https://maps.google.com/?ll=latitude,longitude

示例:maps.google.com/?ll = 38.882147,-76.99017

更新

截至2017年,Google现在拥有创建跨平台Google Maps URL的正式方法:

https://developers.google.com/maps/documentation/urls/guide

您可以使用类似的链接

https://www.google.com/maps/search/?api=1&query=1200%20Pennsylvania%20Ave%20SE%2C%20Washington%2C%20District%20of%20Columbia%2C%2020003 

7
如何创建经纬度?
nadeem gc

4
如果用户使用的是新的Google Maps,则此方法似乎有点麻烦。要创建一个链接以强制结果页面以经典模式显示,只需将其追加&output=classic到链接即可。因此整个事情看起来像这样:http://maps.google.com/?q=1200%20Pennsylvania%20Ave%20SE,%20Washington,%20District%20of%20Columbia,%2020003&output=classic
Matt

4
@Matt亚麻怎么样?而且,output = classic不会永远存在,如果用户喜欢新地图怎么办?
克里斯·B

2
是否可以通过URL在地图上放置图钉?
跳蚤2014年

5
这仍然伟大工程(感谢@ChrisB!),但它看起来像谷歌地图本身的格式是现在 https://www.google.com/maps/place/1200 Pennsylvania Ave SE, Washington, District of Columbia, 20003 ¶对于某些地点,您可以逃脱只使用名称...但maps.google.com/?q=www.google.com/maps/place/不一定会返回相同的结果:https://www.google.com/maps/place/White House扩张到https://www.google.com/maps/place/The+White+House,+1600+Pennsylvania+Ave+NW,+Washington,+DC+20500,但https://maps.google.com/?q=White House给我在北卡罗莱纳州的一家古董店
亨利

67

我知道我已经很晚了,但我想为后代做出贡献。

我写了一个简短的jQuery函数,它将所有<address>标签自动转换为Google Maps链接。

在此处查看演示。

$(document).ready(function () {
   //Convert address tags to google map links - Michael Jasper 2012
   $('address').each(function () {
      var link = "<a href='http://maps.google.com/maps?q=" + encodeURIComponent( $(this).text() ) + "' target='_blank'>" + $(this).text() + "</a>";
      $(this).html(link);
   });
});

奖金:

我还遇到了一种情况,该情况要求从链接生成嵌入式地图,尽管我会与未来的旅行者分享:

查看完整的演示

$(document).ready(function(){
    $("address").each(function(){                         
        var embed ="<iframe width='425' height='350' frameborder='0' scrolling='no'  marginheight='0' marginwidth='0' src='https://maps.google.com/maps?&amp;q="+ encodeURIComponent( $(this).text() ) +"&amp;output=embed'></iframe>";
        $(this).html(embed);             
    });
});

@ Michael Jasper thanx为您的代码...它让我在div中的地图...但我的问题是引脚信息被弹出...我不想要。所以你能指导我如何不打开密码信息框吗???????。thnx提前...
Shwet 2013年

3
请注意,HTML5 <address>标签并不是用于提供邮政地址,而是用于提供与内容相关的联系信息(通常是作者)。developer.mozilla.org/zh-CN/docs/Web/HTML/Element/address
Neograph734

好答案!感谢分享。我不确定它的后果,但是即使没有,它也能正常工作encodeURIComponent()
moreirapontocom

12

2016年2月:

我需要根据客户端输入的数据库值来执行此操作,而无需使用经纬度生成器。这些天,Google非常喜欢经/纬度。这是我学到的:

1 链接的开头看起来像这样:https : //www.google.com/maps/place/

2 然后您输入您的地址:

  • 使用+而不是任何空格。
  • 在城市的前后放置一个逗号。
  • 包括邮政/邮政编码和省/州。
  • 用任何数字替换任何#。
  • 用单个+替换任何++或++++

3 将地址放在地点/之后

4 然后在最后加上一个斜线。

注意:最后的斜杠很重要。用户单击链接后,Google会继续向该URL附加更多内容,并在此斜杠后添加该链接。

此问题的工作示例:

https://www.google.ca/maps/place/1200+宾夕法尼亚州+ Ave + SE,+华盛顿,+ DC + 20003 /

希望对您有所帮助。


尽管该示例有效,但我无法为德语地址重新创建该示例。我最终实现了Chris B的答案(... /?q = term)。
gl03

值得庆幸的是,这现在也适用于德语地址。请参阅:google.com/maps/place/...
雅尼克Schuchmann



2

我借鉴了迈克尔·贾斯珀(Michael Jasper)和乔恩·亨德肖特(Jon Hendershot)的解决方案,提供以下内容:

$('address').each(function() {
    var text = $(this).text();

    var q    = $.trim(text).replace(/\r?\n/, ',').replace(/\s+/g, ' ');
    var link = '<a href="http://maps.google.com/maps?q=' + encodeURIComponent(q) + '" target="_blank"></a>';

    return $(this).wrapInner(link);
});

与以前提供的解决方案相比,此解决方案具有以下优点:

  • 不会删除中的HTML标签(例如<br>标签)<address>,因此保留格式
  • 正确编码URL
  • 它会压缩多余的空格,以便在编码后生成的URL更短,更清晰且易于阅读
  • 它会产生有效的标记(Hendershot先生的解决方案创建的标记<a><address></address></a>无效,因为<address>内嵌元素(例如)中不允许使用块级元素<a>

警告:如果您的<address>标签包含块级元素像<p>或者<div>,那么这段JavaScript代码会产生无效的标记(因为<a>标签将包含这些块级元素)。但是,如果您只是在做这样的事情:

<address>
  The White House
  <br>
  1600 Pennsylvania Ave NW
  <br>
  Washington, D.C.  20500
</address>

这样就可以了。


我在项目中使用了您的解决方案,只需根据您的需要调整代码即可。现在可以使用。
Mycodingproject

2

这是我从Google Maps的一篇文章中找到的:

  1. 打开Google地图
  2. 确保要嵌入的地图或街景图像显示在地图上。
  3. 点击左上角的主菜单☰。
  4. 点击共享或嵌入地图
  5. 在出现的框顶部,选择“ 嵌入地图”标签。
  6. 选择所需的大小,然后复制代码并将其粘贴到您的网站或博客的源代码中。

注意:如果您在精简模式下使用地图,则将无法嵌入地图。请注意,嵌入式地图可能无法提供路况信息和其他一些Maps信息。

在此处输入图片说明


这个对我有用。复制此嵌入代码并将其粘贴到您的网站。
卡比尔·侯赛因


1
http://maps.google.com/maps?q=<?php echo urlencode($address); ?> 

编码转换,并添加所有多余的元素,例如空格和all。因此,您可以轻松地从db获取平面文本代码并使用它,而不必担心要添加的特殊字符


1
encodeURIComponent是javascript,您应该使用urlencode($ address);
ximi

1

最好的方法是使用以下行:

var mapUrl = "http://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=16900+North+Bay+Road,+Sunny+Isles+Beach,+FL+33160&amp;aq=0&amp;sll=37.0625,-95.677068&amp;sspn=61.282355,146.513672&amp;ie=UTF8&amp;hq=&amp;hnear=16900+North+Bay+Road,+Sunny+Isles+Beach,+FL+33160&amp;spn=0.01628,0.025663&amp;z=14&amp;iwloc=A&amp;output=embed"

请记住在必要时替换第一和第二地址。

你可以看一下工作样本


1

我遇到了类似的问题,我需要为网站上的每个地址(每个地址都包裹在一个地址标签中)完成此操作。jQuery的这一部分对我有用。它将抓取每个<address>标签并将其包装在带有该标签包含的地址的google maps链接中!

$("address").each(function(){

    var address = $(this).text().replace(/\,/g, '');
    var url = address.replace(/\ /g, '%20');

    $(this).wrap('<a href="http://maps.google.com/maps?q=' + url +'"></a>');

}); 

工作示例-> https://jsfiddle.net/f3kx6mzz/1/


2
您可以使用encodeURIComponent代替代替手动尝试对字符串进行URL转义。
塞缪尔


0

C#替换方法通常对我有用:

foo = "http://maps.google.com/?q=" + address.Text.Replace(" ","+");

0

我刚刚发现了这个,喜欢分享。

  1. 在maps.google.com上搜索您的地址
  2. 点击右下角的齿轮图标
  3. 点击“共享或嵌入地图”
  4. 单击短网址复选框,然后将结果粘贴到href中。
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.