Google Maps 现在拥有其第三个版本的 JavaScript API。 我记得在 v2 中玩过某个版本的 API,并认为它有点酷,但有点难以理解。 其中一点是,v3 不再需要申请 API 密钥,这很好。
我确定这部分是因为我自己对 JavaScript 的掌握有所提高,但我发现 API 做得非常好,而且易于使用。 首先,它是完全基于事件的。 这意味着您可以将事件监听器附加到不同的对象,例如地图本身或地图内的对象。 一个简单的例子是,如果单击了一个标记,您可以更改地图的缩放级别,更改页面其他位置显示的信息,或者您可能希望使用 JavaScript 执行的任何其他操作。
它不仅可以处理地图内部的对象的事件,而且您用于创建地图和地图内部对象的那些对象也包含许多用于控制它们的方法。 这使得使用页面其他位置发生的事件轻松控制地图变得容易。
我决定稍微玩一下,尝试构建一些东西。
我使用了 jQuery 来帮忙,但这绝对不是必需的。
我在一个无序列表中创建了一个位置列表。 每个列表项都包含 HTML5 数据属性,其中包含其纬度和经度。 它还包含标题以及长描述和短描述。
<li data-geo-lat="41.9786" data-geo-long="-87.9047">
<h3>O'Hare Airport</h3>
<p>Flights n' stuff</p>
<p class="longdesc"><strong>About:</strong> O'Hare International Airport has been voted the "Best Airport in North America" for 10 years by two separate sources: Readers of the U.S. Edition of Business Traveler Magazine (1998-2003) and Global Traveler Magazine (2004-2007). Travel and Leisure magazine's 2009 "America's Favorite Cities" ranked Chicago's Airport System (O'Hare and Midway) the second-worst for delays, New York City's airport system (JFK, Newark Liberty, and LaGuardia) being the first.</p>
</li>
当将鼠标悬停在这些列表项之一上时,我应用一个“hover”类来处理样式,将地图“平移”到新的坐标,并使用更多信息填充右侧区域。
这一切都相当简单,并且添加了更多注释以进行澄清。 添加/编辑点就像在 HTML 部分 更改坐标 和文本一样简单。
想法
这个想法来自 这个网站,我在 ilovetypography 的一条推文 中发现了它。
这是一种在某个地理区域显示不同点的好方法,以前从未见过这种类型的映射实现。 两个大拇指点赞!
Chris,
我正在使用 Zoho Creator 收集信息并将用户引导到世界各地的不同位置。 是否有办法使其与 Zoho Creator 或其他类似网页一起使用?
我喜欢它,感谢分享!
时机完美,一如既往! 我刚刚在阅读 NetTuts 教程后开始深入研究 Maps API。 唯一的问题是,NetTuts 教程基于 API 的 V2 版本。
谢谢!
喜欢这个教程……还有 Pequod's!
伙计,太棒了! 你获得了当天的酷炫奖。
很遗憾,在本教程中,如果未启用 JavaScript,则没有其他选项。 也许是所有人的静态 goggle 地图设计……
他们确实提供了一个“静态地图”API,它不需要 JavaScript,因此,如果您对此感兴趣并有兴趣构建回退,请查看它。
如果您将其平移到俄勒冈州的某个条目会发生什么?
它只是立即缩放而不是平移。 您可以通过放大其中一个点并悬停在其他点上来查看效果。 限制是地图的当前宽度。
我使用过 Google 地图,我获取地理编码的方式是在 Google 地图上键入我想要的位置。 例如,如果您键入波特兰俄勒冈州,它将在地图上放置一个气泡。 然后,如果您右键单击该气泡并选择“这是什么地方”,它将把波特兰俄勒冈州的文本更改为地理编码。 试试看
是的,Chris,另一个很棒的例子。 前几天我在 Google 上观看了一段关于 v3 的视频。 讨论了如何在 api 中渲染图块,如果在较大的距离上有多个点,这可能会非常慢。 您的示例大约有 6 个图块,也许我不知道,如果您在网格上的每个 6 个图块上放置 x 6 个图钉,它会很慢。 不过,发言人所说的是为了提高速度,您可以绘制一层 div 并将它们集成到该层上,使其在概念上更静态。
很多不错的理论,但实现又是另一回事。
不错的例子。 谢谢!
这确实是一个实现 Google 地图的非常酷的解决方案。 感谢分享这个想法,Chris!
嘿,Chirs,不错的博客。 我目前在我的所有网站中都使用 Google 地图,并且有一个非常棒的程序可以在那里获取许多重要信息。 我还没有研究过我们可以使用 API 做什么,但如果您可以更改图钉的外观等,它看起来很棒。
您好,Chris,
这个 api 确实很棒! 非常有用。 是否也可以在不是“来自 Google”的地图上使用 api? 比如说,您需要在购物中心的平面图或主题公园的地图上使用这样的功能? 只是一个想法。 我在 Google 上搜索了类似的东西,但总是以 Google 地图而不是自定义地图结束。
干杯,
Pioter
当然可以。
http://gmaps-samples-v3.googlecode.com/svn/trunk/planetary-maptypes/planetary-maptypes.html
太棒了………………….
谢谢..
非常酷,干得好。 您是否可以控制平移的速度? 在我看来,它有点快。
我认为它不可控。 .panTo 方法只接受一个参数,它是 LatLong
我想知道是否可以制作一个倒计时计时器功能,该功能将根据当前点和目标点之间的差异以及动画所需的时长,依次传递一个逐步的 LatLong 变量。
当然,这只是假设线性过渡。 缓动可能会变得太花哨,以至于我无法理解。 此外,如果您必须不断地向 Google 的服务器发出请求,这可能不是一个好的解决方案,而如果它是缓存的……也许吧。 也许我将来会尝试一下。
Chris,
带有演示和下载的超棒信息。
此 HTML 将帮助我。
非常感谢。
非常好,我们实际上将使用 Google 地图 API 开发一个 Web 应用程序。 这绝对提供了一些启发。 谢谢。
这真是太棒了! Chris,出色的工作,感谢分享!
这些都是有用的东西。 干得非常好!
非常棒!
完全不是网页设计,但是……没有什么比芝加哥好啦 :)
其中一个地点离我的实习地点非常近……
现在我可能得去试试 Pequod's Pizza 了……
嗨,Chris,
这太棒了,地图非常灵敏!
我最近也在查看地图 API,并拼凑了一个页面,将带有地理位置信息的推文放置在地图上。 V3 API 使它变得非常容易。
http://www.pabloestrada.us/worldcup/
我将查看您的代码,看看如何改进我的代码;)
谢谢,Chris!对于我目前正在线框绘制的网站来说,这是一个完美的解决方案。
只有一个问题……您尝试过Howard上的Eduoardo's Pizza吗?深盘菠菜派是我们的最爱。 :)
快速说明一下,当放大几次,然后将鼠标悬停在项目上时,周围的平移仍然有效,但是第一个无效。
当放大到略高于默认缩放级别时,从或到奥黑尔机场的切换是即时的,没有动画。
问题:是否可以设置缩放级别?即让它从近距离的A点缩放至远距离的B点?
就在你认为谷歌不可能变得更好时,他们不断推出更多很棒的想法。这真的很酷!我迫不及待地想看看他们接下来会想出什么。
谢谢。你能提供更多细节吗?
代码中引用了一个example.js文件,
[ ]
但它未包含在下载文件中。
这将是一个很棒的应用。
我想开始学习如何使用API。希望它易于理解。
谢谢!
这非常酷。谢谢Chris!
Chris,你的工作很棒,我用自己的坐标尝试了一下,运行完美,只有一个小的问题:只有当点彼此靠近时,平移才有效。一旦距离超过一屏,它就会直接跳到目标位置。你知道如何解决这个问题吗?这样就完美了……我还意识到,当你缩放时也会发生同样的情况,随着点之间距离的增大,它就无法再平移了。无论如何,你的工作非常棒。谢谢!
我非常喜欢!但我有一个问题,使用这个方法,我可以在谷歌上很好地定位我的页面吗?
我想做一个在谷歌上排名靠前的网页,我不知道是否可以用这个方法做到。
谢谢
Esther
我有一个使用v3获取路线的谷歌地图示例,但我不知道如何在清除文本框后将地图返回到其原始起点。
有人知道吗?
这是一个粗略的布局,请尝试输入您的地址。除了返回起点之外,其他功能都正常工作。
http://dev-steele.designvsdevelop.com/index.php?option=com_vehicles&view=vehicles&id=26&Itemid=6
到目前为止,这是我见过的最好的应用之一。
实现简单,代码通用。
我启用了标题以向标记提供工具提示……
例如如下所示
我的实现
Chris,你让我的生活更美好!谢谢!
哇!这里实现了非常酷的功能!将Chris的代码提升到一个更高的水平,干得好。
看起来不错!我一直在寻找类似的东西。我只有一个问题。我将使用的地址来自数据库,并且是动态的。该数据库中没有坐标。我在想是否也可以使用地址。
请不要介意我的拼写,我的英语写作水平不是很好
如果你知道这方面的信息,我很乐意了解。
问题已解决;)
很棒,我将在我的网站上使用它。我需要这个。谢谢Criss,你太棒了
我认为这对我们非常有用。我喜欢它。这篇文章将帮助我。
对我们来说是有用的信息……因此,当人们知道谷歌地图为其移动产品发布了API时,他们肯定会开始购买支持JavaScript的手机……
Venkatesh – Gulfwebstudio.com
你好朋友,
我无意中发现了你的网站,并且不会对这封信的内容感到惊讶,因为我是巴西人,我正在使用谷歌翻译,rs。我知道我问你很奇怪,但你那里有完全用CSS完成的表格示例吗?我已经找了好几天了。
我设计了在tow中尝试访问并在CSS中运行的例程
选择所需的员工以创建时间表…
<option value="cadastro_escaladofuncionario.php?id_funcionario=”>
0) {
mysql_data_seek($rsEscalaDoFuncionario, 0);
$row_rsEscalaDoFuncionario = mysql_fetch_assoc($rsEscalaDoFuncionario);
$funcionariocorrente = $row_rsEscalaDoFuncionario[‘id_funcionario’];
$nomedofuncionariocorrente = $row_rsEscalaDoFuncionario[‘nomecompleto’];
}
?>
希望您能查看该例程并帮助我找到解决方法。我得到的最好的结果是在PHP中放置它,但这个表单需要CSS。
热烈拥抱!
非常棒的实现!很棒的工作。我在我的页面上使用了css-tricks中的许多代码片段,也许我也会在某个地方使用这个代码片段,只是还没有找到合适的位置^^
很棒的努力……以前从未见过……
展示多个位置详细信息的最佳方式……
给你竖起两个大拇指,伙计……
我怎样才能插入kml文件呢?
谢谢
嗨,Chris!不错的教程!它完全符合我的需求,但我需要添加信息窗口。我设法添加了它们,但当地图平移到下一个位置时,信息窗口保持打开状态。你将如何实现这些信息窗口?谢谢!
我真的很喜欢!但我确实有一个问题,如何将代码连接到WP?
谢谢
RodgerFox
将所有文件连接到页面。显示站点名称和描述。但是地图没有显示,请帮帮我。
在我的WordPress上可以运行。但是……描述文本重复了。奇怪的问题。:(
有人可以确认这在IE中是否有效吗?谢谢。
不错的教程,如何在WordPress中实现它
您好。首先,感谢您提供这个,我非常喜欢。我有一个问题。如果我有许多位置,但我想保持地图和详细信息画布的尺寸。我的意思是,我是否可以执行某些操作,例如使位置列表在具有这些尺寸的画布尺寸内向下滚动。我该如何做到这一点?非常感谢。