maps-api-v3_Google Maps API的自适应设计，视网膜图像和调试

maps-api-v3

Google Maps API for Designers系列的最后一部分通过查看响应式设计，视网膜图像以及一系列使生活变得更加轻松的测试和调试工具来汇总内容。它提供了整个区域的全面巡视，您可以在自己的项目中进行进一步的探索。

响应式设计和媒体查询

除非过去几年一直在灌木丛下打sn，否则您会知道响应式设计就是根据您所查看的设备来更改网站并进行适应。

该演示的首页（上）还使用响应式设计，根据用户使用的设备（或更具体地讲，屏幕宽度）向人们展示地图的更改版本。

在执行其他操作之前的第一步是确保在页面head设置了视口元标记。

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

注意：您可以使用哪种视口属性来精确设置。阅读我们的指南以获取更多详细信息。

我们将在此处使用的处理响应式设计的流行方法是在CSS中应用媒体查询 。媒体查询是一种细分CSS并应用不同样式的方式，具体取决于例如正在查看网站的视口的宽度。

下面的代码清单很长，但是对正在发生的事情很有用。要查看运行中的代码，请查看主页。如果在较大的屏幕上查看，请拖动浏览器的侧面使其变窄。当浏览器的宽度达到640px以下时，设计应更改。

<!--Setting up the CSS styles-->
<style type="text/css">
html {
height: 100%;
}
#gears{
width:50%;
}
img {
border:none;
}
body {
height: 100%;
margin: 0px;
padding: 0px;
background: none;
}
#overall_wrapper {
height: 100%;
width: 100%;
margin:0px;
padding:0px;
border:none;
background:none;
}
#title_box{
width: 100%;
background-color:#89cbed;
text-align:center;
margin:0px;
padding-top:5px;
padding-bottom:10px;
border:none;
}
#yellow_line_and_arrow{
display:none;
}
#button_to_map_standard{
width: 100%;
background: none;
text-align:center;
margin-left:auto;
margin-right:auto;
margin-top: 2px;
margin-bottom: 5px;
padding: 0px;
display:none;
}
#button_to_map_mobile {
width: 95%;
background: none;
text-align:center;
margin-left:auto;
margin-right:auto;
margin-top: 10px;
margin-bottom: 10px;
padding: 0px;
display:block;
}
#blurb_about_demo_wrapper{
width: 100%;
background: #09F;
margin:0px;
padding:0px;
border:none;
}
#blurb_about_demo_content{
width: 80%;
margin-left:auto;
margin-right:auto;
margin-top:5px;
padding-top:5px;
font-family:Tahoma, Geneva, sans-serif;
font-size: 1.8em;
line-height: 2em;
text-align:center;
color:#ffffff;
}
#footer_box_wrapper{
width: 100%;
background-color:#89cbed;
text-align:center;
margin:0px;
padding:0px;
border:none;
border-top-width:2px;
border-top-style:solid;
border-top-color:#ffffff;
}
#footer_box_content{
width: 80%;
margin-left:auto;
margin-right:auto;
font-family:Tahoma, Geneva, sans-serif;
font-size: 1.1em;
line-height: 1.4em;
color:#ffffff;
}
/*The media query. This CSS overwrites the corosponding elements (above) when the screen is over 641px in width. */
@media (min-width: 641px) {
body {
height: 100%;
margin: 0px;
padding: 0px;
background-image: url('background9.jpg');
background-color: #B3CDE6;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
background-size: cover;
}
#overall_wrapper {
height: 100%;
width: 40%;
margin-left: auto;
margin-right: auto;
margin-top:0px;
margin-bottom:0px;
padding-left: 5%;
padding-right: 5%;
padding-top: 2%;
padding-bottom: 2%;
border-right-width: 2px;
}
#title_box{
width: 400px;
background-color:#89cbed;
text-align:center;
margin-left:auto;
margin-right:auto;
margin-bottom:2px;
padding-top:10px;
padding-bottom:10px;
border-top-left-radius:20px;
border-top-right-radius:20px;
border-bottom-left-radius:0px;
border-bottom-right-radius:0px;
}
#yellow_line_and_arrow{
width: 400px;
text-align:center;
margin-left:auto;
margin-right:auto;
margin-top:2px;
display:block;
}
#button_to_map_standard{
width: 95%;
background: none;
text-align:center;
margin-left:auto;
margin-right:auto;
margin-top: 2px;
margin-bottom: 5px;
padding: 0px;
display:block;
}
#button_to_map_mobile {
width: 95%;
background: none;
text-align:center;
margin-left:auto;
margin-right:auto;
margin-top: 2px;
margin-bottom: 5px;
padding: 0px;
display:none;
}
#blurb_about_demo_wrapper{
width: 95%;
background:#ffffff;
text-align:center;
margin-left:auto;
margin-right:auto;
margin-top: 10px;
margin-bottom: 0px;
padding-top:5px;
padding-left:5px;
padding-right:5px;
padding-bottom:15px;
border-top-left-radius:20px;
border-top-right-radius:20px;
border-bottom-left-radius:0px;
border-bottom-right-radius:0px;
}
#blurb_about_demo_content{
font-family:Tahoma, Geneva, sans-serif;
font-size: 1.4em;
line-height: 1.6em;
color:#09C;
}
#footer_box_wrapper{
width: 95%;
background-color:#89cbed;
text-align:center;
margin-left:auto;
margin-right:auto;
margin-top:0px;
margin-bottom:30px;
padding-left: 5px;
padding-right: 5px;
padding-top: 1px;
padding-bottom: 2px;
border-radius: 20px;
border-top-left-radius:0px;
border-top-right-radius:0px;
border-bottom-left-radius:20px;
border-bottom-right-radius:20px;
border-width:0px;
}
#footer_box_content{
font-family:Tahoma, Geneva, sans-serif;
font-size: 0.9em;
line-height: 1.3em;
color:#ffffff;
}
}
</style>

在这种情况下，媒体查询是第101行的@media (min-width: 641px)代码，以及大括号内的后续CSS。此媒体查询正在检查设备宽度。

移动优先设计

最好使用移动优先的方法。这就是默认样式针对移动设备的想法，然后随着视口变大，使用媒体查询逐渐添加例外。这种方法可帮助网站在移动设备上更快地加载。例如，像我们使用的大背景图像之类的东西仅在较大的屏幕设备上加载。

因此，在上面的代码中，代码的第一部分（即，在媒体查询上方-@media @media (min-width: 641px) ）默认情况下会在每个设备上加载。然后， @media (min-width: 641px) media @media (min-width: 641px)媒体查询会在大括号内为宽度超过641像素的设备加载样式。

断点

一个常见的问题是：

“设计中的断点应该在哪里？”

在此示例中的断点为641px。该演示仅使用一个断点，但通常您需要多个断点。这在很大程度上取决于您的内容，还取决于您要定位的设备范围以及市场上流行的屏幕分辨率。

在此示例中，iPhone（宽度为640像素）将显示默认的移动样式，而iPad2（宽度为768）将显示桌面版本。我们选择的断点适合此地图，因为图形对于手机而言太大。但是，其他更多基于文本的网站可能会发现，只有缩小到小得多的屏幕尺寸时，才需要显着更改样式，因此断点可能会更低。

注意：选择断点时，通常最明智的做法是简单地考虑设计，观察断点，而不是针对特定的设备分辨率。屏幕的尺寸是如此之大，多种多样，而且随着时间的流逝而变化，以至于根本无法准确地跟踪它们。

引导用户使用不同的地图版本

有时，根据用户的观看环境，为他们提供完全不同的内容版本是合适的。

在我们的示例中，这是使用两个div标签（即button_to_map_mobile和button_to_map_standard ）完成的，每个标签都包含一个不同的链接和一个稍有不同的绿色“访问地图”按钮。如果您使用的是笔记本电脑或台式机，请查看主页并向内拖动浏览器，直到设计更改为移动版式。您应注意，绿色的“访问地图”按钮略有变化，以包含“移动”一词。如果立即单击此按钮，将获得地图的移动版本。

媒体查询用于替换当前可见的div 。即，如果您看一下上面列出的代码，则可以看到button_to_map_standard的display:none; 当使用默认的移动样式时将其应用于它，但是当媒体查询检测到屏幕宽度超过641像素时，它将应用display:block; 到button_to_map_standard。（媒体查询的作用与button_to_map_mobile div相反）。

如果您正在按照本教程制作自己的网页，请仔细阅读此页面顶部链接中的源代码。我个人发现，在将其扩展到更复杂的设计之前，首先使用“移动优先”方法和一个断点可以使工作变得更容易。

值得注意的是，在为多个设备开发网站时，应该真正考虑选择替代内容和响应内容。

视网膜图像

希望您刚刚浏览了该地图的新移动版本。我们将在短短一分钟内再说一遍。但是首先，值得一看的是主页如何使用为视网膜屏幕设计的图像。

视网膜（和其他高像素密度）屏幕具有如此多的像素，并且彼此之间的距离非常近，以至于人眼的视网膜几乎无法分辨出各个像素。视网膜屏幕被认为是下一代屏幕，并且已经有越来越多的设备配备了这些屏幕，例如iPhone 4和5以及一些高规格的MacBook Pro。但是，不利的一面是，未考虑这些屏幕的图形实际上看起来会有些模糊。

幸运的是，有几种解决方法。您追求的方法将取决于图像本身的性质。本演示使用两种方法： retina.js库和SVG图形。

Retina.js

Retina.js是一个轻量级JavaScript库，可以免费下载。您只需要将JavaScript文件保存在服务器上与您的网站相邻的位置，并在结束body标签之前添加以下代码行。

<script type="text/javascript" src="/scripts/retina.js"></script>

然后，您为每个图像保存两个版本。一种尺寸是您在标准屏幕上查看图像的尺寸的两倍，另一种尺寸是正常尺寸。使该库正常工作的技巧是，您需要将图像保存在服务器上的同一文件夹中，并遵循严格的命名约定-

emilysypic.jpg =普通分辨率版本
emilyspic@2x.jpg =高分辨率版本

然后，您可以像往常一样将图像添加到页面标记中，只需添加标准分辨率版本-

<img src="/images/my_image.png" />

当有人在视网膜显示屏上查看您的网站时，retina.js脚本的存在会告诉您的网站检查是否有高分辨率版本。

尽管retina.js限制了为每个图像保存两个版本所需的时间，但对于摄影或非矢量类型的图像而言，它可能非常有用。

主页上绿色的“访问地图”按钮使用retina.js插件。要查看实际效果，请尝试在视网膜设备（例如iPhone 4或5）上查看网站，并查看绿色按钮上的文本有多清晰。如果您已经下载了自己的代码副本，请删除retina.js插件，然后再次在retina设备上查看网站。您应该注意到按钮的质量（例如，文本中的白线）较差。

我建议将retina.js用于在您的首页或模板中不经常更改的关键照片或非矢量类型的图像。但是，例如，如果您正在运行一个由多个作者组成的博客，则期望他们为每个图像创建两个版本可能是不现实的。

SVG

为视网膜屏幕创建清晰图形的另一种方法是使用SVG图像。 SVG实际上代表可缩放矢量图形。顾名思义，SVG图像适用于矢量类型的图像（即不适合照片！）。

要查看示例，请查看主页。齿轮和扳手图标是SVG图形。其宽度设置为50％。调整浏览器大小时，您应该能够看到它始终保持清晰的状态。如果您缩放浏览器（例如在电话上），它也可以保持清晰的清晰度。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="100" r="90" stroke="red" stroke-width="9" fill="yellow" />
</svg>

SVG图形实际上是基于XML的矢量格式。这意味着您可以根据需要使用基本文本编辑器直接对其进行编辑。上面的代码创建了下面黄色圆圈的图片。

您可以以插入jpg或其他任何图像的相同方式将SVG图像插入网页。

<img src="yellowcircle.svg" width="70" height="70">

所有现代浏览器都支持SVG，包括在iPhone 4和5等视网膜设备上使用的SVG。但是，为不支持它们的旧版浏览器（例如IE 8）提供后备功能仍然很重要。您已经在网站的其余部分使用了Modernizr （请参见下文），那么这是一种明智的方法。但是，还有一个专用JavaScript插件SVGeezy可以处理此问题。

要使用此插件，请下载脚本并将其存储在服务器上与您的网站相邻的位置。然后在close body标记之前添加以下代码行。

<script type="text/javascript" src="svgeezy_plugin/svgeezy.js"></script>
<script type="text/javascript">
svgeezy.init(false, 'png'); // this will let the plugin check all images
</script>

与上面讨论的视网膜插件类似，您实际上每次都会提供两张图片； SVG文件和后备jpeg或png文件。这些都需要存储在服务器上的同一位置。当SVGeezy插件发现您的浏览器不支持SVG文件时，它将使用该图像的替代版本。

如果您已从此页面顶部的链接下载了演示的源文件，请查看SVG文件refresh.svg以及tutorial4_index.html文件如何使用此图像。

在创建SVG文件时，手动编码图像文件的想法足以使最怪异的怪胎运转一英里！幸运的是，您可以从Adobe Illustrator（单击文件>保存> SVG ）或开源矢量图像编辑软件Inkscape将图像另存为SVG文件。话虽如此，我建议您进行一些试运行以确保您的设计在浏览器中按预期显示。

周围也有很多网站提供免费的SVG图标下载。本演示中使用的齿轮图标来自“ 游戏图标” 。另一个不错的网站是Icon Finder ，它列出了所有搜索结果旁边的可用格式。 Icon Finder也非常有用，可以让您了解可以将哪种图像生成为SVG文件。

尽管SVG文件仅适用于某些类型的图像，但是如果精心利用，可以提供一种向所有设备提供清晰图像的有效方法。在继续之前，值得一提的是，还有其他方法可以实现此演示中未实现的视网膜图像，例如使用服务器端PHP解决方案，该解决方案使用cookie和修改后的.htacces文件，或使用图标字体。

一个数据集：两个地图版本

该演示有两个版本的地图。笔记本电脑/台式机/平板电脑版本和移动版本。

创建两个版本似乎有点作弊。而且，由于明显的维护开销，对于绝大多数网站，我不建议您使用单独的移动版本和台式机版本。但是，我们正在构建的新型Google地图是明智的选择，即拥有两个版本。

但至关重要的是，我们不会重复数据。相反， 地图的两个版本都从Flickr上的同一组数据中提取 。这意味着拥有两个版本的开销很小，并且我们可以根据设备灵活地自定义地图的外观。

我已经从上一教程中扩展了该示例。本教程从这个新的Flickr帐户（用户ID：99915664 @ N08）中提取数据。（提醒-每个Flickr都有一个容易记住的用户名（在本例中为bennett1671 ）和一个用户ID号（在本例中为99915664 @ N08）。）因此，如果您按照上一个教程的内容进行操作，您需要将地图指向这个新的Flickr帐户。

这个新的Flickr帐户包含所有节日的照片，包括较小的活动和主要活动。上一教程中使用的Flickr帐户仅包含较小节日的照片。主要事件的照片未存储在Flickr上。

在Flickr中标记

在Flickr中为照片添加标签是使其工作的关键。 Flickr中的每张照片都被标记以表明它们是主要事件还是小型事件 （这些标记对于笔记本电脑/台式机/平板电脑版本是必需的），以及它们是englandevent ， scotlandevent ， walesevent还是irelandevent （这些标记对于移动设备都是必需的）版）。

Flickr API调用

在笔记本电脑/台式机/平板电脑版本上单击橙色的“较小事件”按钮时，将进行以下Flickr API调用。这将调用99915664 @ N08 Flickr帐户，并通过标签smallevent过滤结果。

http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=f7095d157adfd78715344ed893a9554b&user_id=99915664@N08&tags=smallevent&has_geo=1&extras=geo&format=json&jsoncallback=?

在移动版本上，我根据国家/地区对标记进行了聚类，并对图标进行了相应的着色。因此，例如，当您单击白色英格兰标记时，将进行以下Flickr API调用。此API调用与上一个API调用相同，不同之处在于它基于标记englandevent过滤结果。

http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=f7095d157adfd78715344ed893a9554b&user_id=99915664@N08&tags=englandevent&has_geo=1&extras=geo&format=json&json&jsoncallback=?

请参阅上一教程，以完整了解如何处理这些Flickr API调用的结果。它们都使用Flickr API中的flickr.photos.search方法。

SVG文件和移动版本

移动版本上的所有地图标记均为SVG文件（请参见上文）。因此，尽管它们比笔记本电脑/台式机/平板电脑版本上的图标简单一些，但在视网膜屏幕（例如iPhone 4或5）上查看时，它们始终保持清晰。

测试与调试

为了结束本教程系列，我只想强调一些我认为在开发地图或与此有关的其他任何在线工具时有用的工具。我知道周围有成百上千的工具，所以无论如何这都不是详尽的清单。相反，它是我用来测试事物的“工具包”，弄清为什么还没有计划什么。

这些工具很有用，也许是必不可少的，它可以避免使网站在您自己的计算机上完美运行的噩梦，而只是发现它在客户或客户的计算机上做了意外的事情。

Google Chrome开发人员工具

要访问Chrome开发人员的工具，请打开Chrome，然后依次点击右上角的菜单按钮 ，工具和开发人员工具 。

这会做很多事情；足以单独填写整个教程！我经常使用的一些地方是：

元素选项卡（上方）–可让您单击网页上的区域并查看基础代码。它还使您可以使用CSS并在网页上实时查看更改。在尝试不同的设计时，这很有用。
控制台选项卡–这将显示错误。有时它们是无害的，而其他时候（尤其是在构建站点时！）则需要引起注意。
“网络”选项卡（下面）–可让您看到所有资源都已加载，并且（左侧）包括带有加载速度的时间线（右侧），因此您可以确定可能导致网站速度下降的原因。

浏览器支持

并非所有浏览器都支持所有HTML和CSS功能。当您想利用HTML5和CSS3的更有趣的功能时，这可能会出现问题，同时还要确保拥有IE的最古老副本的人也可以访问您的网站。

但是，除非您有非凡的记忆力（我没有！），否则几乎不可能记住哪个浏览器反对哪些功能。这是caniuse网站非常方便的地方。该网站总结了哪些HTML，CSS，SVG等功能与哪些浏览器版本兼容。

另外，如果您想使用一项新功能，但较旧的浏览器不支持该功能，则可以使用Modernizr JavaScript库。正如他们在网站上解释的那样：

“利用酷炫的新Web技术非常有趣，直到必须支持落后的浏览器为止。无论浏览器是否支持某个功能，Modernizr均可让您轻松编写条件JavaScript和CSS来处理各种情况。”

如果用户的浏览器不支持特定功能，则Modernizr还允许您指定后备功能。这与上述SVGeezy插件非常相似。

跨浏览器测试

除了在构建网站时计划对浏览器的支持和回退之外，在不同的浏览器上对其进行测试也很重要。 Browserstack是一种有效的方法。它使您可以提交URL，然后查看网站在不同浏览器中的工作方式。唯一的缺点是它涉及订阅费。尽管可以说这比拥有一堆可用于测试的真实机器和设备便宜。还提供免费试用版，您可以看一下并看看您的想法。

涉及使IE工作正常的奥秘的另一个有用的浏览器测试工具是Modern.IE网站。顾名思义，它仅适用于IE。但是它是免费的，仍然是非常有用的资源。

在使用Browserstack或ModernIE浏览您的网站之前，重要的是验证您的代码以消除任何语法错误。

验证HTML，CSS和Javascript

验证程序是一个免费的Web应用程序，可根据当前标准检查您的代码。标准对于确保您的网站在不同的浏览器和设备上以可预测的方式运行非常重要。

用于HTML的W3C标记验证器服务
适用于CSS的W3C标记验证器服务

周围还有许多工具可以帮助您检查JavaScript语法。 Closure Compiler实际上是一个压缩JavaScript的工具（如果文件很大，您可能还想这样做），但是它对于检查语法错误也很有用。例如，讨厌的分号吸引了我们所有人！如果将代码复制并粘贴到代码中并单击“编译”，则所有错误将在“错误”选项卡下突出显示。另一个有用的代码检查站点是JSHint 。

下载速度测试

页面速度很重要，因为如果您的网站加载时间较长，不仅访问者会被赶走，而且Google在订购搜索结果时可能会考虑到这一点。

有许多工具可让您进行测试，包括-

GTMetrix
Google Pagespeed

这些工具还提出了可以提高性能的建议。例如，您可以做的一个常见改进是进一步压缩图像。您可以将这些工具与Google Chrome开发者工具（上方）上的“网络”标签结合使用，以调查潜在的问题。

结论

好的–就这样！正如我在本教程开始时所说的那样，这将是一次漫长的旅程！希望在完成本教程系列之后，您现在已经可以制作自己的Google地图。玩得开心！

大多数图像（例如节日照片）的字幕都可以在之前的教程1和3的末尾找到。这些是本教程的新增内容：

翻译自: https://webdesign.tutsplus.com/tutorials/responsive-design-retina-images-and-debugging-for-google-maps-api--webdesign-14284

maps-api-v3