地图

的地图Element可以在所有三个构建器中使用。内容构建器、页眉构建器和页脚构建器。Element的目的是输出一个地图，这个地图可以以多种不同的方式配置，允许您向最终用户显示您所在位置的地图(或任何您想要的位置)。

要添加地图元素，搜索“地图”并拖动“地图”到画布。

可用的控件

像其他元素一样，控件被分解成多个部分，包括:

• 地图
• 框架
• 定制

需要注意的主要控件是Map控件和Frame控件。

地图控件

虽然这是不言自明的，但重要的是要注意是否使用谷歌选项，而不是嵌入选项您需要实际输入一个谷歌API密钥注册到您的域，以允许该功能工作。点击在这里获取谷歌映射API密钥。

否则，你会看到地图显示错误。

你也会注意到如果你选择谷歌还有一个选项叫做谷歌地图样式，这是一个很棒的功能，允许您通过复制和粘贴直接从谷歌获得的JSON地图样式来轻松更改地图的整个样式。

框架风格

框架样式有效地允许你修改谷歌地图本身周围的框架外观;这使您可以设置诸如字体大小、高度和宽度、空白、填充等内容。

地图标记

地图元素为任何谷歌地图设置地图标记!地图标记可以通过位于元素开头的可排序控件添加:

如果您检查每个标记，您可以指定每个标记的纬度和经度，以及为该标记包括将在弹出窗口中显示的可选内容。此外，自定义地图标记图像可以实现更自定义的外观:

当使用自定义地图标记图像时，两个“图像偏移量将出现控件，允许您在需要时移动标记。这对于标记点位于不同位置的某些情况是必要的。例如，利用上面的截图，你可以看到我们已经偏移了Y轴上的标记-标记图像高度的50%．这将移动标记到适当的位置，以确保图像底部的点在地图上的正确位置:

在其他情况下，您可能根本不需要移动标记，只需将X轴和Y轴保持在0％如下所示:

对于下面的图像，我们已经翻译了它的位置50％在x轴上-50％由于图形上的点落在y轴上:

有时候你可能需要用不同的数字，比如这个图需要a50％x轴上的平移和a40%由于其形状不均匀，在y轴上的平移:

在翻译自定义地图标记时要记住的最重要的事情是图形的运动始终是相对于它自身的尺寸．对于a100 px正方形图像，在x轴上移动50%在Y轴上移动-100%意味着你在移动它50 px向右100 px向上如果你发现自己有疑问，你可以简单地移动滑块，为你可能使用的任何自定义图形找到适当的位置，因为它们的位置将在构建器中实时更新。

定制

自定义窗格由各种功能组成，允许您进一步控制元素的样式和功能:

• ID - - - - - -在元素上设置HTML ID。
• 类 - - - - - -在元素上设置HTML类。
• 元素的CSS - - - - - -使用此特性可以增加对Element的风格控制，特别是对嵌套标记的控制。点击在这里有关此特性的详细信息，如使用el美元来动态地定位基本标签，等等。
• 在断点期间隐藏 - - - - - -当需要改变设计时，以不同的屏幕尺寸隐藏元素。点击在这里获取更多信息。
• 条件 - - - - - -当满足某些条件时，从页面中添加/删除元素。”如果设置了特色图像…”)．点击在这里获取更多信息。
• 自定义属性 - - - - - -使用此选项将自定义HTML属性添加到元素的根标记(例如:data-info = " 123 ")．这在与各种脚本和库集成时尤其有用。

演示

要查看地图元素的现场演示，请单击在这里．

总结

你现在已经有了一个很好的工作知识地图元素的工作原理以及如何使用它。