Skip to main content

高级嵌入

Beta：

高级嵌入处于测试阶段。 如果您在测试版功能中遇到问题，请在 Esri 社区分享您的反馈。

虽然不太可能，但对内部 ArcGIS StoryMaps 组件的更改可能会影响或破坏自定义代码。 务必将自定义限制在基本功能和样式覆盖范围内。

高级嵌入适用于故事、简报和集合。

Web 开发人员可以使用高级嵌入将 ArcGIS StoryMaps 项目集成到网站中，并通过自定义链接共享到 Web 域，例如 https://www.my-organization.gov/annual-report。 还可以通过高级嵌入修改 ArcGIS StoryMaps 项目的外观，并使用 HTML、CSS 和 JavaScript 添加自定义功能。

高级嵌入是通过 <script> 标签实现的，这些标签允许将 ArcGIS StoryMaps 项目的内容视为主机 Web 页面的一部分。 这样可以更好地控制内容样式，并消除在 <iframe> 中使用标准嵌入时可能存在的额外滚动条。 ArcGIS StoryMaps 应用代码仍在 Esri 服务器上托管并自动更新，以为您提供最佳、最新的安全性和性能改进功能。

通过高级嵌入，可执行以下操作：

  • 在 Web 域的特定 URL 中，嵌入 ArcGIS StoryMaps 项目

  • 使用组织的标准网站页眉和页脚，将 ArcGIS StoryMaps 项目集成到网站的全局导航中

  • 在将 ArcGIS StoryMaps 内容嵌入网站时，避免使用多个滚动条

  • 使用专用字体

  • 向图像、超链接、按钮及其他内容元素应用自定义样式

  • 添加自定义组件，例如在页面首次加载时显示的启动画面，或读者可用于提交问题或评论的可扩展面板

  • 打造全新用户体验，例如要求读者输入邮政编码，然后在地图中导航到该地点的表单

  • 使用您偏好的分析服务跟踪读者互动

提示：

有关详细信息和示例，请参阅 GitHub 上的 ArcGIS StoryMaps 开发人员示例。

启用高级嵌入

按照以下步骤启用高级嵌入：

  1. 在构建器中，单击页眉中的更多按钮 ...，然后选择设置。

  2. 在高级选项卡中，单击启用高级嵌入。

  3. 在允许的域中，输入计划嵌入 ArcGIS StoryMaps 项目的域名；例如，www.example.com。 请勿包含协议或端口号。

  4. 单击添加。

  5. 如需添加多个域，可重复以上操作。

  6. 发布 ArcGIS StoryMaps 项目。

重要信息：

ArcGIS StoryMaps 项目必须与所有人共享，才能嵌入到另一个 Web 页面中。

复制嵌入代码片段

在启用高级嵌入并将 ArcGIS StoryMaps 项目发布并共享给所有人后，按照以下步骤获取嵌入所需的代码片段。

  1. 编辑 ArcGIS StoryMaps 项目。

  2. 单击页眉中的更多按钮 ...，然后选择嵌入此故事。

  3. 在下拉菜单中，选择脚本（高级）。

  4. 单击复制。

    将复制嵌入代码。

嵌入代码也可以在通过嵌入选项卡的共享菜单查看已发布 ArcGIS StoryMaps 项目时获得。

代码片段将以 <script> 标签形式提供，类似于以下内容。 在要添加 ArcGIS StoryMaps 项目的页面上放置第二个脚本标签。

<script>
  window.storyMapsEmbedConfig = {
    storyId: '[StoryMapItemID]',
    rootNode: '.storymaps-root',
  };
</script>
<script src="https://storymaps.arcgis.com/embed/view"></script>

其他资源

返回顶部