You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何在Magento 2的form.phtml中调用含谷歌地图的启用CMS区块?

将谷歌地图添加到CMS区块并在联系页form.phtml中调用的方法

一、创建包含谷歌地图的CMS区块

  • 登录Magento后台,进入Content > Elements > Blocks页面
  • 点击右上角「Add New Block」按钮,填写以下信息:
    • Block Title:自定义后台显示名称(比如「联系页谷歌地图」)
    • Identifier:设置唯一标识(比如google_map_contact,后续调用必须完全匹配)
    • Store Views:选择要显示该区块的店铺视图
    • Status:设置为「Enabled」
  • 在「Content」编辑器中嵌入谷歌地图代码:

    可通过谷歌地图官网获取嵌入代码:打开目标地点地图,点击「分享」>「嵌入地图」,复制生成的iframe代码粘贴到此处
    示例代码:

    <iframe 
      src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3022.219815013303!2d-73.98542868468017!3d40.74881707932804!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c259a70d4f591b%3A0x820a327019460b8c!2sEmpire%20State%20Building!5e0!3m2!1sen!2sus!4v1699999999999!5m2!1sen!2sus" 
      width="100%" 
      height="450" 
      style="border:0;" 
      allowfullscreen="" 
      loading="lazy" 
      referrerpolicy="no-referrer-when-downgrade">
    </iframe>
    
  • 点击「Save」保存区块

二、在联系页form.phtml中调用该CMS区块

  • 找到主题下的联系页表单模板文件,路径通常为:app/design/frontend/[你的主题包]/[你的主题]/Magento_Contact/templates/form.phtml
  • 打开文件,在需要显示地图的位置(如表单上方、下方)插入以下代码:
    <?php echo $block->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId('google_map_contact')->toHtml(); ?>
    

    注意:代码中的google_map_contact必须与第一步设置的区块Identifier完全一致

  • 保存文件后,清理Magento缓存(后台进入System > Tools > Cache Management,点击「Flush Magento Cache」)
  • 刷新联系页即可看到谷歌地图显示在指定位置

内容的提问来源于stack exchange,提问作者Vidya Sagar

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.31 04:39:34