谷歌地图谷歌地图_为您的Google地图增添真实感

谷歌地图谷歌地图

使用谷歌地图API是最流行的（如果不是最流行的）的方式来展现当今网站地理地点之一。在本教程中，我将演示如何使Google地图更具真实感，并为您提供一些有关如何使自己的地图真正发光的提示！

步骤1：热身

我们的目标是使地图具有逼真的外观，同时仍允许用户缩放和平移地图。

我们将通过创建将遮盖地图的半透明.png图像来获得此效果，然后使用一些CSS将其放置在地图顶部。

在打开Photoshop之前，我建议您先拍摄一张真实的地图或一张纸，然后将其像要渲染的地图一样折叠。这确实可以帮助您了解表面对光源的React。以此为一般建议，因为我认为在抓住鼠标之前玩纸总是很不错的！

在执行此操作时，您还应该获取您选择的Google地图的屏幕截图-我们将在Photoshop中使用此屏幕截图作为参考。

提示：如果您使用的是Mac，并且想获取屏幕上特定区域的屏幕截图，则只需按“ command + shift + 4”，然后单击并拖动以绘制要选择的矩形选择被抓

步骤2：地图和背景

抓取屏幕截图后，可以在Photoshop中将其打开，我们将开始工作！

首先要做的是使文件透明。双击包含地图的背景层，然后按Enter键，将背景转变为普通层。现在，我们想给自己一些额外的空间来玩，所以转到“图像”>“画布大小”（alt + shift + C），然后将画布放大一点。我在每侧增加了90像素，但是尺寸取决于您，并取决于您要获得的最终外观。无论如何，请随时更改此大小。

现在是时候添加背景图像了。只要选择在地图下看起来不错的东西，我就选择了在CGtextures.com上找到的木材纹理，但是您可以使用任何想要的东西，无论是图片还是漂亮的渐变色。

选择背景后，将其放在层次结构底部的新层上。

第三步：边缘

现在是时候给地图一些形状了，因为这个矩形看上去并不像一张折叠的纸。

为此，我们仅使用多边形套索并绘制边缘。此时，将一些辅助线放置在要创建折痕的位置确实有帮助，因此我创建了一个粗糙的3x2网格。它不一定是准确的，但是在接下来的步骤中我们经常会需要它。

关闭选择后，您可以单击图层蒙版按钮，这将自动创建仅显示所选区域的蒙版。

步骤4：折页

切割边缘后，以下步骤将处理地图的某些深度。我们要做的第一件事是使地图看起来像已折叠。

首先，创建一个新的透明层，然后使用矩形选择工具，并按照您之前设置的网格，选择3个相对的矩形（大于地图）并用纯黑色填充。

现在，我们要在此图层上应用蒙版-它必须与我们在地图上应用的蒙版相同。最简单的方法是按住Alt键并拖动并拖动地图图层的遮罩，然后将其放置在我们当前正在处理的图层上。

剩下的一项任务是将图层的不透明度降低到大约6-10％。

步骤5：白色边框（是新黑色）

此时，我想在地图周围添加白色边框。为此，请创建一个新图层，用您喜欢的任何颜色填充它，将其填充设置为0％，然后应用与应用于地图图层相同的图层蒙版。

目前没有什么可看的，但是很快就会改变：双击图层并应用8-10像素的白色内部笔触。应用和内部笔触非常重要，因为外部笔触会具有圆角，在我们的情况下看起来不太好。

第6步：闪避和燃烧

让我们改善照明。我们将使用类似于减淡/加深效果的方法进行处理。我们在这里可以做的是创建2个不同的图层，然后再次应用常规的图层蒙版，一层将使某些折叠变亮，而另一层将使其他折叠变暗。

选择浅色层，抓住具有低不透明度和流动性的大的白色软笔刷，然后开始在浅色矩形纸上的折叠处开始绘画（上面没有黑色透明矩形的纸）。

这部分很难用文字来解释，但是图片会做得更好。

我将笔刷设置为20％的不透明度和20％的流量，然后按照网格绘制一些笔触。这不一定是准确的，因为我们将再次使用图层蒙版。

首先，很难在地图顶部看到这些笔触，因此，为清楚起见，我在图层下方应用了50％的灰色背景。显然，您不需要这样做。

当我对白色笔触感到满意后，就可以在该图层上选择图层蒙版，抓住矩形选择工具，并在网格的帮助下选择要隐藏此效果的正方形。一旦选择正确，就用黑色填充。

现在，您可以根据笔触的不透明度降低此层的不透明度。

提示：请记住，我们正在为地图创建.png叠加层，因此“正常”是我们可以使用的唯一混合模式。这也意味着，如果夸大这些白色或黑色笔触并使它们变得不透明，则最终结果可能看起来很尴尬。

步骤7：道奇和加深重装

现在是时候对较暗的面进行相同的操作了，因此选择您先前创建的空层并重复步骤6。这次您将使用黑色或深灰色的画笔，并且将选择之前未选择的正方形。

步骤8：投下阴影

是时候画阴影了。

为了使其美观和逼真，请创建一个新层，然后使用多边形套索工具绘制一个大致类似于阴影的形状，然后将其填充为黑色。

使阴影看起来逼真是非常棘手的，但是请记住这一点：地图离桌子越远，阴影的边缘越柔和。

涂抹工具可以为您提供很多帮助，我经常会抓住它并将其涂抹在角落上，红色的强度代表着我更集中涂抹的地方。

最终结果应如下所示：

第9步：开Kong

在这一点上，你应该有类似的东西。 Photoshop差不多完成了。

剩下要做的就是将通常的图层蒙版应用到阴影和背景图层，因此再次按住Alt单击并将图层蒙版从地图图层拖到背景图层，阴影图层也是如此。完成此操作后，将这两个蒙版反转，因此选择图层蒙版并单击命令+ I（在PC上为控制+ I）。

最后要做的是关闭地图图层的可见性。这样，我们在所有图层上都切了一个洞，并且图像的很大一部分是透明的。

现在，图层堆栈的底部应如下所示：

步骤10：Png

以透明的png-24导出为Web，将文件命名为“ mask.png”并关闭Photoshop！

步骤11：HTML和JS

最难的部分已经完成，现在放松并打开您喜欢的文本编辑器。

现在，您只需要创建一个新HTML文件即可，该文件使用google maps API和CSS文件对样式进行一些样式设置。

无论如何，Google上都会有很多关于此API的文档，您将在接下来的步骤中看到您不需要成为专家编码者，您只需要写几行即可：

<!DOCTYPE html>
<html>
<head>
<title>Webdesign.tutsplus - Google Maps realistic look</title>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<!-- src and initialize the google maps api -->
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(45.466, 9.186); /* latitude and longitude for the center of the map*/
var myOptions = {
zoom: 14, /* zoom level of the map */
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false,      /* disable the Satelite-Roadmap switch */
panControl: false,          /* disable the pan controller */
streetViewControl: false,   /* disable the streetView option */
zoomControl: false,         /* disable the zoom level buttons, the user will still be able to control the zoom by scrolling  */
scaleControl: true,         /* optional: shows the scale of the map */
scaleControlOptions: {
/* since we decided to show the scale, we tell the script to show it in the corner we like, in this case Bottom Left */
position: google.maps.ControlPosition.BOTTOM_LEFT
}
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions); /* show the map in the element with the id: map_canvas */
}
</script>
</head>
<body onload="initialize()">
<div id="map_container">
<div id="map_canvas"></div>
<div id="mask"></div>
</div>
</body>
</html>

如您所见，代码非常简单，我决定更改一些选项：

mapTypeControl: false,        /* disable the Satelite-Roadmap switch */
panControl: false,          /* disable the pan controller */
streetViewControl: false,   /* disable the streetView option */
zoomControl: false,         /* disable the zoom level buttons, the user will still be able to control the zoom by scrolling  */
scaleControl: true,         /* optional: shows the scale of the map */
scaleControlOptions: {
/* since we decided to show the scale, we tell the script to show it in the corner we like, in this case Bottom Left */
position: google.maps.ControlPosition.BOTTOM_LEFT
}

我禁用了切换到“卫星视图”的功能，因为我认为它不符合这种逼真的感觉。由于相同的原因，我禁用了平移控制器，streetView和缩放级别，但是您可以在此处随意执行任何操作。

步骤12：CSS

接下来是要在链接CSS文件中编写的最低要求，并且您将看到没有什么太复杂的。

#map_container {
width: 1000px;
position: relative;
margin-left: auto;
margin-right: auto;
}
#map_canvas {
position: absolute;
top: 70px;
left: 85px;
height: 445px;
width: 845px;
}
#mask {
position: absolute;
top: 0;
left: 0;
height: 586px;
width: 1000px;
background: url('mask.png') no-repeat;
background-size: 100%;
pointer-events:none;
}

这段代码的27行代码只是为了使事情看起来正确，您可以按自己喜欢的方式对其进行更改，您唯一需要关心的是最后一个pointer-events: none; 。

pointer-events: none; 防止鼠标与#mask div进行交互，因此光标将能够与其下方的任何内容进行交互。这样，即使被蒙版或其他东西遮盖了，地图也可以继续工作。

如果您在喜欢的文档中寻找指针事件，您会发现它主要与SVG文件一起使用。我认为它与“ none”值的使用被低估了，并且尚未开发！

其余CSS并不是特别令人兴奋。它只是将地图和遮罩放置在正确的位置。 map_canvas设置为1202px宽和622px高，因为它恰好是包含地图的网格的大小（图片中的红色矩形），top：97px和left：97px是该网格距顶部的偏移量左上角（图片中的蓝色矩形）。

可能的应用

现在，您已经了解了基础知识，可以通过多种不同方式来应用此技术。

当我设计这张地图时，这只是概念上的证明，我并没有考虑过特定的应用程序，但是当我开始编写教程之后，我发现向大家展示一种实用的使用方法很有趣。因此，我布置了一个简单的联系页面，我认为为地图提供一些角度会很好。

为此，我只选择了所有图层，并使用“编辑”>“变换”>“透视”为地图赋予了正确的变形。

以相同的方式，我扭曲了木材的纹理以创建木板，并在其下方添加了一些阴影。

这是一个有效的结果，并且可以在很大的尺寸下使用，但是蒙版的png-24文件会很快变得很重，因此这是一个很好的尺寸/重量折衷方案。

下载源文件，然后自己检查其他.psd。

结论

希望我已经足够清楚，并且您已经为网站成功制作了精美的地图。

如果您可以建议其他方法或改善工作流程，请在评论部分中记下您的想法。谢谢阅读！

翻译自: https://webdesign.tutsplus.com/tutorials/add-a-touch-of-realism-to-your-google-maps--webdesign-5304

谷歌地图谷歌地图