地图

的地图元素允许您通过谷歌Maps JavaScript API将交互式地图嵌入到站点。您可以指定要突出显示的位置，并从各种显示选项中进行选择。

在这节课中

1. 添加一个地图
2. 创建API密钥
3. 自定义地图设置
4. 风格你的地图

在你开始之前

要使用map元素，需要一个谷歌Maps API键。无键地图返回带有“仅供开发用途”水印的低分辨率地图。学习更多的下面．

添加一个地图

控件将地图元素添加到页面上添加元素面板(一)→组件部分。

如果您将映射添加到画布，而您没有将谷歌Maps JavaScript API键添加到您的项目设置中，您将看到一个灰色的映射占位符。

嵌入地图的其他方法

控件中粘贴谷歌映射URL，可以将映射嵌入到富文本中富媒体控件中可用的嵌入选项+ (+)当文本光标在富文本编辑器中的新行上时出现的菜单。了解更多关于富媒体的信息．

还可以直接嵌入静态谷歌映射谷歌地图的网站。只是获取嵌入代码然后粘贴到嵌入元素在你的页面。您需要通过更新代码本身来更改地图的宽度和高度。您可以将两者都设置为100%，然后将任何宽度和高度值应用于嵌入元素在风格的面板得到所需的尺寸。

查看这些教程，从不同的地图平台嵌入地图．

创建一个API密钥

为了在你的网站上使用实时地图，你需要创建和连接一个API密钥到你的项目。

1. 打开地图设置(双击画布上的地图或选择它并按enter键)。
2. 点击“添加API键”。你会被带到你的项目设置→集成→谷歌映射．这是您将粘贴谷歌映射的API密钥的地方。

生成API密钥

去谷歌地图平台，点击get started并按照说明生成你的API密钥:

1. 选择地图
2. 创建一个新项目或使用下拉菜单选择您已经创建的项目
3. 设置你的谷歌云平台计费帐号
4. 点击凭证在左边
5. 创建凭证．选择API键。
6. 为项目启用API
7. 复制生成的API密钥

将API密钥粘贴到项目中

现在你已经将API密钥复制到剪贴板，你需要将它添加到你的项目:

1. 去你的项目设置→集成”选项卡→谷歌地图部分
2. 将API密钥粘贴到谷歌映射JavaScript API密钥场
3. 保存更改
4. 发布你的网站

限制API密钥

1. 回到谷歌开发人员控制台(从这里复制API密钥)
2. 单击限制关键

您还可以通过凭据→凭据→API密钥访问密钥限制。只需单击您想要添加限制的API。

4. 选择HTTP引用者(网站)下关键的限制
5. 在下面输入您的域名接受来自这些HTTP引用者(网站)的请求
6. 保存你的关键的限制

在谷歌上注册项目

您可能需要注册您的项目来启用Maps API。按照以下步骤注册你的项目并启用Maps API:

1. 去谷歌开发者控制台
2. 选择要为其启用API的属性
3. 点击图书馆选项卡的左边栏
4. 下地图单击页面的部分地图Javascript API
5. 如果您看到了启用API的指示器，这意味着您不需要做其他任何事情。

6. 如果你看到启用按钮，然后单击它以启用属性的API。

需要知道-谷歌地图平台API和计费

免责声明:本节中的信息可能不准确。请阅读谷歌的文档(本节中的链接)以获得更多最新信息。

谷歌地图平台为他们的地图api引入了一种新的现收现付定价模式——从2018年7月16日起生效。每个计费账户每月可获得200美元谷歌美元的地图平台信用。这样每个月就可以免费加载28000个页面。在此基础上，在前10万张地图加载中，每张地图加载的费用为0.007美元。了解更多关于Maps JavaScript API使用和计费的信息．

如果已经有了映射api，请使用谷歌地图平台转换工具为您现有的项目添加计费，并保护您的API密钥。

欲了解更多信息，请查看谷歌映射API FAQ页面。有关谷歌Maps API的支持和更多问题，请查看谷歌地图平台支持和资源页面。

自定义地图设置

Map元素将在设计器中显示地图的一般预览，但您可以在已发布的站点上查看实际的地图。

如果我们双击地图，您可以输入一个地址或大致位置，并按enter键。如果谷歌Maps澄清了该地址，它将在address字段中更新。

视图设置

您可以通过点击访问更多的地图设置显示所有设置在弹出式模式或通过进入元素设置面板。在这里，您可以控制地图显示和行为的特定方式。可以设置如下:

• 工具提示-指定文本，将出现在您的地图大头针上方为您的位置
• 变焦-设置地图的放大等级。0会显示更大的区域，而18会放大你设置的位置。
• 映射类型-选择四个类型的地图:道路，地形，卫星，或混合。

滚动和触摸设置

您还可以选择当有人与您的地图进行交互时，您的地图将如何表现元素设置面板→地图设置。

• Scrollwheel-这启用或禁用滚动轮在地图上缩放。如果你向下滚动页面，而你的鼠标恰好落在地图边界内，滚动滚轮或触控板上的移动将导致地图放大或缩小。如果您不想要此行为，请取消选中Scrollwheel。

• 触摸拖拽-这启用或禁用双手指触摸手势，如平移和缩放在触摸设备上的地图。取消选中该复选框可以防止您意外地在地图上移动，而不是在实际页面上使用手指移动。

风格你的地图

当然，您可以对Map元素设置样式以调整其行为和位置。它会有一些默认高度，但你可以放入自己的大小和位置值。可以重命名类，并将该类应用于项目中可能使用的其他映射。

要查看地图的显示方式，请发布并访问您的网站。