步骤2:在Commerce中配置Google Maps
-
在 管理员 侧边栏中,转到 Stores > Settings>Configuration。
-
在左侧面板中的 General 下,选择 Content Management。
-
展开
有关内容管理高级工具配置选项的详细信息,请参阅配置参考指南。
-
对于 Google Maps API Key,粘贴您在步骤1中复制的密钥。
-
单击 Test Key。
如果您的密钥有问题,请返回Google Maps平台网站以解决该问题。 然后,重试。
-
验证密钥后,单击 Save Config。
将地图添加到舞台
-
打开Page Builder工作区的页面、块或动态块。
-
在Page Builder面板中,展开 Media 并将 Map 占位符拖到舞台上。
如果为商店配置了Google Maps平台,则会显示商店位置的地图。
如果尚未为您的存储配置Google Maps平台,则会显示占位符映射。
添加自定义映射位置
-
将鼠标悬停在地图容器上以显示工具箱,然后选择 设置 (
)图标。 -
在 Edit Map 页面的右上角,单击 Add Location。
-
输入要与地图上的pin关联的 Location Name。
-
收集要用于自定义位置的位置坐标。
或者,在 Position 框中,您可以拖动所显示地图中的图钉。
如有必要,请在新的浏览器窗口中转到Google Maps,然后使用以下方法之一获取坐标:
方法1: 从URL复制
-
在左上角的 Search 框中输入地址,然后单击 搜索 (
)图标。 -
复制URL中的坐标并将其粘贴到记事本中。
方法2: 从“此处是什么?”复制
-
右键单击在地图上标记位置的红色图钉,然后在菜单中选择 What’s here?。
-
在显示的标签中,复制文本(包括坐标)并将文本粘贴到记事本中。
-
-
在每个 Coordinates 框中输入数字(不带逗号)。
您还可以输入要在地图上可用的剩余信息。
-
与您要与地图位置关联的任何其他信息竞争:
选项 描述 Phone Number 位置的电话号码。 Street Address 地点的街道地址。 City 位置的城市。 Region/State 位置的区域或状态。 Zip/Postal Code 位置的邮政编码。 Country 位置所在的国家/地区。 Comment 要包括的任何注释。 -
完成后,单击 Save。
新位置将显示在 Edit Map 页上的地图和地图位置网格中。
为地图设置样式
使用Google Maps平台样式向导应用六个预定义主题之一或创建自定义主题。 您可以生成包含映射样式属性或指向样式化映射的链接的JSON文件。
更改映射样式
-
在 管理员 侧边栏中,转到 Stores > Settings>Configuration。
-
在左侧面板中的 General 下,选择 Content Management。
-
展开
-
在 Google Maps Style 文本框下,单击创建映射样式。
此操作将在单独的选项卡中打开Google Maps 平台样式向导,您可以在其中定义Google Maps平台项目的样式。
-
单击 Create a Style 并按照提供的说明操作。
完成后,单击 Finish。
-
将完成的样式导出为JSON代码或URL,以便将其添加到Commerce配置。
-
JSON:在包含生成的JSON代码的框下,单击 Copy JSON。
-
URL:在带有所生成URL的框下,单击 Copy URL。
-
-
返回到“管理员浏览器”选项卡,并将生成的代码或URL粘贴到 Google映射样式 框中。
如果您使用的是URL,请将
YOUR_API_KEY
占位符替换为您的Google Maps API密钥。 此URL链接到您样式化的Google地图。 -
单击右上角的 Save Config。
更改映射设置
-
将鼠标悬停在地图容器上以显示工具框,然后选择 设置 (
)图标。 -
根据需要更改基本设置:
选项 描述 Height 指定所显示地图的高度(以像素为单位)。 Show Controls 确定是否显示标准Google Map控件。 -
根据需要修改 Advanced 设置:
-
要控制添加到容器的地图内容的水平位置,请选择 Alignment:
选项 描述 Default
应用在当前主题的样式表中指定的对齐默认设置。 Left
将内容沿地图容器的左边框对齐,并允许使用指定的任何边距。 Center
将内容与映射容器的中心对齐,并允许指定的任何边距。 Right
将内容沿地图容器的右边框对齐,并允许指定的任何边距。 -
设置应用于地图容器所有四面的 Border 样式:
选项 描述 Default
应用关联样式表指定的默认边框样式。 None
不提供任何容器边框的可见指示。 Dotted
容器边框显示为虚线。 Dashed
容器边框显示为虚线。 Solid
容器边框显示为实线。 Double
容器边框显示为双线。 Groove
容器边框显示为一条开槽线。 Ridge
容器边框显示为脊线。 Inset
容器边框显示为内嵌行。 Outset
容器边框显示为外线。 -
如果设置了除
None
之外的边框样式,请完成边框显示选项:选项 描述 Border Color 通过选择色板、单击拾色器或输入有效的颜色名称或等效的十六进制值来指定颜色。 Border Width 输入边框线条宽度的像素数。 Border Radius 输入像素数,以定义用于使边框每个角倒圆角的半径大小。 -
(可选)从当前样式表中指定要应用于映射容器的 CSS classes 的名称。
用空格分隔多个类名。
-
输入 Margins and Padding 的值(以像素为单位)以指定地图容器的外边距和内边距。
在映射容器图中输入每个相应的值。
容器区域 描述 Margins 应用于容器所有边的外边缘的空白空间量。 Padding 应用于容器所有边的内边缘的空白空间量。 NOTE
填充对映射内容类型不可用。
-
-
完成后,单击 Save 以应用设置并返回到Page Builder工作区。