Google Maps 滑块

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 200 美元的免费积分!

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 的一条推文 中发现了它。