地图导览H5工具使用教程

欢迎使用地图导览H5工具！本教程将引导您快速掌握工具使用方法，轻松将您的手绘地图或平面图，制作成可交互的地图导览H5。

一、三步快速创建您的地图项目

步骤 1：选择类型

首先需要选择地图类型，目前只支持虚拟地图模式（电子地图模式正在开发中）。

步骤 2：设置地图基础信息

在这一步，您需要为您的项目命名，并上传作为背景的地图图片（支持JPG、PNG格式）。为了达到最佳效果，建议图片尺寸为1920x1080像素。设置完毕后，点击“下一步”。

小技巧：如果您想快速体验，可以点击“使用样例数据/图片”按钮，系统将为您自动填充示例内容和示例西湖景区地图导览。

步骤 3：配置模板样式

接下来，为您的地图H5选择合适的展示版式和信息弹框样式。

选择版式：

竖屏：适合在手机上竖屏浏览，是默认和推荐的选项。
横屏：适合在平板或横屏场景下使用（正在开发中，后续将上线支持）。

点位弹框展示方式：设置点位弹出信息框的样式风格。

图片弹框：以大图为主，突出视觉效果，适合图片内容丰富的点位。
图文弹框：上图下文的经典布局，信息呈现与视觉效果兼备。
文字弹框：纯文字展示，适合公告、须知等信息发布。

在您选择的过程中，左侧的手机预览框会实时展示不同配置下的效果，方便您决策。

完成三步设置后，点击“创建 & 开始地图标记”，即可进入地图设置工作台界面。

二、地图H5设置工作台详解

创建项目后将进入工作台界面，可以管理地图上的点位信息，并进行点位标记操作。

1. 点位管理：添加/导入点位 (POI)

添加/导入“点位”（Point of Interest, POI）信息，例如景区里的“雷峰塔”，商场里的“星巴克”。

支持两种方式添加点位：

手动新增：在“点位管理”标签页下，点击“新建点位”按钮，逐一填写点位信息（名称、描述、封面图、电话、地址等）。

批量导入：如果您有大量的点位需要添加，推荐使用CSV批量导入功能。点击“导入CSV”按钮，您会看到一个弹窗。

您可以直接从Excel或在线表格中复制数据，然后粘贴到文本框中。系统会自动解析并预览数据。您还可以在预览界面为每个点位单独上传封面图或粘贴图片URL。

确认无误后，点击“确认导入”，所有点位信息便会瞬间添加到您的项目中。

2. 地图标记：在地图上“画”出您的点位

点位信息准备就绪后，进入”地图标记“，开始在地图上标记它们的位置：

左侧是“点位列表”。

中间是“地图画布”。

右侧是“标记图片”和“当前标点”的设置区域。

标记步骤如下：

选择点位：从左侧的点位列表中，点击一个您想要标记的点位，例如“杭州岳王庙”。

在地图上点击：在中间的地图画布上，找到“杭州岳王庙”对应的位置，单击鼠标。一个标记点（Marker）就会出现在您点击的位置。

调整位置：如果位置不够精确，您可以直接用鼠标拖动标记点，进行微调。

重复以上操作，将列表中的所有点位一一标记到地图上。右侧的“当前标点”面板会实时显示标记点的相对坐标（X, Y），这个坐标是系统自动计算的，无需手动修改。

还可以进行设置：

调整地图背景色 / 替换地图图片：通过左侧工具栏，可设置画布底色、更换地图图片；

设置点位标记图标：在右侧选择不同的标记图片样式，或者上传自定义的图标。

三、弹框设置

可通过”弹框设置“页面，对弹框样式进行调整：

四、预览与发布

1. 预览

完成所有点位标记及弹框设置后，点击工作台右上角的“预览”按钮，即可进入预览页面。

在这个页面可以：

在右侧的手机框中预览最终效果：交互、点击弹窗，体验和真实用户看到的效果完全一致。

扫描二维码预览：使用手机扫描页面上的二维码，直接在手机上进行沉浸式体验和测试。

复制链接分享：复制预览链接，发送给同事或朋友，让他们也来感受您的杰作。

2. 发布

进入 ”发布设置“ 设置页面，点击”立即发布“，可进入发布上线前最后的设置工作。

如果需要对地图导览H5进行个性化调整，可以点击 ”进入高级编辑“，打开H5编辑器，进行添加页面、动画设置等其他设置操作。

五、关于付费

用户可选择单次发布方式、付费499元后完成地图导览H5发布上线。

恭喜您！已经掌握了使用手绘地图H5制作工具的全过程。快去创建属于您自己的互动地图吧！