媒体 — 地图

使用​ 映射 ​内容类型将映射从Google Maps 平台添加到Page Builder 阶段。 例如,您可以将地图添加到块,然后将该块添加到关于我们联系我们页面。

若要充分利用Google Maps Platform,您可以自定义地图、突出显示商店位置,并使用Google Places向所有Google Maps添加有关商店的丰富信息。

嵌入Google地图的好处

  1. 直接在您的网站上为购买者提供您业务的完整信息(电话号码、网站、评论、星级评等)。

  2. Google地图通常突出显示附近的景点、公园、餐馆等。 此信息可帮助您的客户确定实际地点并计划行程。

  3. 使客户能够轻松找到您的实体商店地址,而无需打开新的浏览器窗口并离开您的网站。

  4. 如果您有一连串实体店,那么在您的网站上添加Google地图有助于以高亮显示的商品的形式提高您的品牌知名度和可信度。

店面示例 — 带有位置 {width="700" modal="regular"}的地图

NOTE
如果您对Page Builder内容进行了重大更改,建议您增加管理员会话生命周期以防止会话在您工作时超时。

地图工具箱

将鼠标悬停在地图容器上时,将显示地图工具箱。

工具
图标
描述
移动
移动图标 {width="25"}
将地图移动到舞台上的另一个位置。
(标签)
Map
将当前内容容器标识为映射。 将鼠标悬停在地图容器上可查看工具箱。
设置
设置图标 {width="25"}
打开“编辑映射”页面,您可以在此页面更改映射和容器的属性。
隐藏
隐藏图标 {width="25"}
隐藏当前映射。
显示
显示图标 {width="25"}
显示隐藏的地图。
复制
图标重复 {width="25"}
制作地图副本。
移除
删除图标 {width="25"}
从舞台上删除映射。
NOTE
隐藏元素存储在数据库中,对客户不可见。 但是,这些元素对搜索引擎和对您的网站爬网的其他机器人可见。 如果通过具有不可见属性的API调用发出请求,则它们也会作为内容的一部分返回,除非您将它们从阶段中删除。

为您的管理员配置Google Maps

在添加映射之前,必须首先打开帐户以免费试用Google Maps平台。 免费试用期为12个月,包含300美元的点数。 如果您用完了信用,Google不会在未经您允许的情况下对您的帐户计费。

步骤1:获取您的Google Maps API密钥

根据您是否已经拥有Google Maps密钥,使用以下过程之一获取配置所需的API密钥。 要设置Google Maps密钥,您必须是有权为您的帐户启用帐单的站点管理员。 如果您尚未准备好设置Google Maps平台帐户,则可以跳过此步骤,暂时使用占位符映射。

  1. 转到Google Cloud Platform Console

  2. 单击项目下拉列表,然后选择或创建要为其添加API密钥的项目。

  3. 要配置API凭据,请按照Google Maps文档中的说明操作。

  4. 将API密钥复制到剪贴板。

步骤2:在Commerce中配置Google Maps

  1. 在​ 管理员 ​侧边栏中,转到​ Stores > Settings>Configuration

  2. 在左侧面板中的​ General ​下,选择​ Content Management

  3. 展开 扩展选择器 Advanced Content Tools

    高级内容工具 {width="600" modal="regular"}

    有关内容管理高级工具配置选项的详细信息,请参阅配置参考指南

  4. 对于​ Google Maps API Key,粘贴您在步骤1中复制的密钥。

  5. 单击​ Test Key

    如果您的密钥有问题,请返回Google Maps平台网站以解决该问题。 然后,重试。

  6. 验证密钥后,单击​ Save Config

将地图添加到舞台

  1. 打开Page Builder工作区的页面、块或动态块。

  2. 在Page Builder面板中,展开​ Media ​并将​ Map ​占位符拖到舞台上。

    将地图拖到舞台 {width="600" modal="regular"}

    如果为商店配置了Google Maps平台,则会显示商店位置的地图。

    Google Maps {width="600" modal="regular"}

    如果尚未为您的存储配置Google Maps平台,则会显示占位符映射。

    Google Maps占位符 {width="600" modal="regular"}

添加自定义映射位置

  1. 将鼠标悬停在地图容器上以显示工具箱,然后选择​ 设置 设置图标 {width="20"} )图标。

  2. 在​ Edit Map ​页面的右上角,单击​ Add Location

  3. 输入要与地图上的pin关联的​ Location Name

  4. 收集要用于自定义位置的位置坐标。

    或者,在​ Position ​框中,您可以拖动所显示地图中的图钉。

    如有必要,请在新的浏览器窗口中转到Google Maps,然后使用以下方法之一获取坐标:

    映射坐标 {width="600" modal="regular"}

    方法1: ​从URL复制

    • 在左上角的​ Search ​框中输入地址,然后单击​ 搜索 搜索图标 {width="20"} )图标。

    • 复制URL中的坐标并将其粘贴到记事本中。

    方法2: ​从“此处是什么?”复制

    • 右键单击在地图上标记位置的红色图钉,然后在菜单中选择​ What’s here?

    • 在显示的标签中,复制文本(包括坐标)并将文本粘贴到记事本中。

  5. 在每个​ Coordinates ​框中输入数字(不带逗号)。

    您还可以输入要在地图上可用的剩余信息。

  6. 与您要与地图位置关联的任何其他信息竞争:

    table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 6-row-2 7-row-2 layout-auto
    选项 描述
    Phone Number 位置的电话号码。
    Street Address 地点的街道地址。
    City 位置的城市。
    Region/State 位置的区域或状态。
    Zip/Postal Code 位置的邮政编码。
    Country 位置所在的国家/地区。
    Comment 要包括的任何注释。
  7. 完成后,单击​ Save

    新位置将显示在​ Edit Map ​页上的地图和地图位置网格中。

    Page Builder — 映射位置网格 {width="600" modal="regular"}

为地图设置样式 styling

使用Google Maps平台样式向导应用六个预定义主题之一或创建自定义主题。 您可以生成包含映射样式属性或指向样式化映射的链接的JSON文件。

更改映射样式

  1. 在​ 管理员 ​侧边栏中,转到​ Stores > Settings>Configuration

  2. 在左侧面板中的​ General ​下,选择​ Content Management

  3. 展开 扩展选择器 Advanced Content Tools

  4. 在​ Google Maps Style ​文本框下,单击创建映射样式

    此操作将在单独的选项卡中打开Google Maps 平台样式向导,您可以在其中定义Google Maps平台项目的样式。

  5. 单击​ Create a Style ​并按照提供的说明操作。

    完成后,单击​ Finish

  6. 将完成的样式导出为JSON代码或URL,以便将其添加到Commerce配置。

    • JSON:在包含生成的JSON代码的框下,单击​ Copy JSON

    • URL:在带有所生成URL的框下,单击​ Copy URL

  7. 返回到“管理员浏览器”选项卡,并将生成的代码或URL粘贴到​ Google映射样式 ​框中。

    如果您使用的是URL,请将YOUR_API_KEY占位符替换为您的Google Maps API密钥。 此URL链接到您样式化的Google地图。

  8. 单击右上角的​ Save Config

更改映射设置

  1. 将鼠标悬停在地图容器上以显示工具框,然后选择​ 设置 设置图标 {width="20"} )图标。

  2. 根据需要更改基本设置:

    table 0-row-2 1-row-2 2-row-2 layout-auto
    选项 描述
    Height 指定所显示地图的高度(以像素为单位)。
    Show Controls 确定是否显示标准Google Map控件。
  3. 根据需要修改​ Advanced ​设置:

    • 要控制添加到容器的地图内容的水平位置,请选择​ Alignment

      table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto
      选项 描述
      Default 应用在当前主题的样式表中指定的对齐默认设置。
      Left 将内容沿地图容器的左边框对齐,并允许使用指定的任何边距。
      Center 将内容与映射容器的中心对齐,并允许指定的任何边距。
      Right 将内容沿地图容器的右边框对齐,并允许指定的任何边距。
    • 设置应用于地图容器所有四面的​ Border ​样式:

      table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 6-row-2 7-row-2 8-row-2 9-row-2 10-row-2 layout-auto
      选项 描述
      Default 应用关联样式表指定的默认边框样式。
      None 不提供任何容器边框的可见指示。
      Dotted 容器边框显示为虚线。
      Dashed 容器边框显示为虚线。
      Solid 容器边框显示为实线。
      Double 容器边框显示为双线。
      Groove 容器边框显示为一条开槽线。
      Ridge 容器边框显示为脊线。
      Inset 容器边框显示为内嵌行。
      Outset 容器边框显示为外线。
    • 如果设置了除None之外的边框样式,请完成边框显示选项:

      边框颜色 {width="600" modal="regular"}

      table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
      选项 描述
      Border Color 通过选择色板、单击拾色器或输入有效的颜色名称或等效的十六进制值来指定颜色。
      Border Width 输入边框线条宽度的像素数。
      Border Radius 输入像素数,以定义用于使边框每个角倒圆角的半径大小。
    • (可选)从当前样式表中指定要应用于映射容器的​ CSS classes ​的名称。

      用空格分隔多个类名。

    • 输入​ Margins and Padding ​的值(以像素为单位)以指定地图容器的外边距和内边距。

      在映射容器图中输入每个相应的值。

      table 0-row-2 1-row-2 2-row-2 layout-auto
      容器区域 描述
      Margins 应用于容器所有边的外边缘的空白空间量。
      Padding 应用于容器所有边的内边缘的空白空间量。
      note note
      NOTE
      填充对映射内容类型不可用。
  4. 完成后,单击​ Save ​以应用设置并返回到Page Builder工作区。

更改网格大小

网格大小确定与Page Builder阶段上的相关的映射的大小。 默认情况下,映射的宽度为12列,最大为16列。

  1. 在​ 管理员 ​侧边栏中,转到​ Stores > Settings>Configuration

  2. 在左侧面板中的​ General ​下,选择​ Content Management

  3. 展开 扩展选择器 Advanced Content Tools

  4. 根据需要更新网格选项:

    note note
    NOTE
    如果需要,请清除​ Use system value ​复选框以修改这些设置。
    • 对于​ Default Column Grid Size,为网格的默认大小输入新值。

    • 对于​ Maximum Column Grid Size,输入新的默认最大网格大小值。

    列网格大小设置 {width="600" modal="regular"}

  5. 完成后,单击​ Save Config

recommendation-more-help
85b60248-86a4-4d5f-9933-5179643f608d