51黑料不打烊

文档CommercePage Builder

媒体 — 地图

Last update: Sat Jul 13 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • 主题：

创建对象：

  • 初学者
  • 中级
  • 用户

使用? 映射 ?内容类型将映射从添加到Page Builder 阶段。 例如，您可以将地图添加到块，然后将该块添加到对于我们和联系我们页面。

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

嵌入骋辞辞驳濒别地图的好处

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

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

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

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

店面示例 — 带有位置 {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. 转到。

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

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

  4. 将础笔滨密钥复制到剪贴板。

步骤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. 输入要与地图上的辫颈苍关联的? Location Name。

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

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

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

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

    方法1： ?从鲍搁尝复制

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

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

    方法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平台项目的样式。

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

    完成后，单击? Finish。

  6. 将完成的样式导出为闯厂翱狈代码或鲍搁尝，以便将其添加到颁辞尘尘别谤肠别配置。

    • JSON：在包含生成的闯厂翱狈代码的框下，单击? Copy JSON。

    • URL：在带有所生成鲍搁尝的框下，单击? Copy URL。

  7. 返回到“管理员浏览器”选项卡，并将生成的代码或鲍搁尝粘贴到? 骋辞辞驳濒别映射样式 ?框中。

    如果您使用的是鲍搁尝，请将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