7.1 快速入门：从注册到接入
1. 平台简介
L.marker、L.polyline、L.polygon、L.icon 等），船讯网在全局同时暴露了 L（Leaflet 命名空间）与 ShipxyAPI（平台封装命名空间）。2. 接入流程总览
| 步骤 | 动作 | 说明 |
|---|---|---|
| 1 | 注册船讯网账号 | 在船讯网注册一个企业/开发者账号 |
| 2 | 申请开通海图GIS服务，获取 API 密钥（Key） | 海图GIS服务为商用服务，需联系船讯网商务/客服开通。开通后您会获得一个 API 密钥（Key），后续所有示例中的 您的密钥 均替换为该 Key |
| 3 | 在前端工程中引入 JS API | 先引入平台提供的 jQuery，再通过带 k 参数的地址引入 API 主文件 |
| 4 | 初始化地图 | 准备一个固定宽高的 <div> 容器，调用 new ShipxyAPI.Map(...) 创建地图 |
3. 引入 JS API
<script>，都放在页面的 <head> 中：k 参数加载：把 您的密钥 整体替换为开通服务时获得的 Key，例如 ?k=abc123def456；ShipxyAPI（船讯网封装类）和 L（Leaflet 原生命名空间），后续所有开发都围绕它们展开。4. Hello World：第一张海图
hello.html），把 您的密钥 替换为您的 Key，用浏览器直接打开即可看到一张全球海图。new ShipxyAPI.Map("map", {ak: "您的密钥"})：这是平台的入口函数。第一个参数是地图容器的 id 字符串（对应 <div id="map">）；第二个参数 options 是配置对象，其中 ak 为授权码，必填，必须与 script 地址里 k 参数使用同一个密钥。options 还有很多可选配置（中心点、缩放级别、各类控件等），详见《02-地图引擎基础：Leaflet控制与绘制》。_map 是一个 Leaflet 的 L.Map 实例，因此可以直接调用 Leaflet 原生方法（如 setView、fitBounds、on 等）以及平台扩展方法。_map.fitWorld()：把地图视野调整为"全球视野"，即缩放和平移到恰好能完整显示世界地图的状态。如果不调用，也可以通过 options 中的 centerPoint 和 zoom 指定初始视野。5. 地图容器与页面基础要求
1.
<div> 没有设置宽高（高度默认为 0），地图会渲染失败或一片空白。推荐使用上文 .my-map 的写法：position: absolute; width: 100%; height: 100%;，让地图铺满浏览器窗口。若嵌入在页面局部，请写成固定高度，如 width: 100%; height: 500px;。2.
</div> 之后（如示例 所示），或放在 window.onload 中执行。3.
<head> 中加入 <meta charset="UTF-8">，避免页面标题、Popup 中的中文出现乱码。4.
k 参数和 options 的 ak 都要替换为您的密钥。5.
background-color: #A3CCFF 是海图海洋区域的底色，瓦片加载间隙不会出现突兀的白色。6.
z-index（示例中用 888）使其位于地图图层之上。6. 常见问题 FAQ
1.
ShipxyAPI is not defined——若是，说明 API 主文件没加载成功，检查第二个 <script> 的地址和 k 参数；2.
<div> 是否设置了高度。容器高度为 0 是最常见的原因，请在开发者工具中查看该 div 的实际尺寸；3.
您的密钥 是否已替换为真实 Key，两处（script 的 k 参数、options 的 ak）都要替换；4.
api.shipxy.com 的请求是否成功（状态码 200）。errorTileUrl（瓦片加载失败时的占位图），出现占位图说明对应瓦片请求失败；m12.shipxy.com、mt2.google.cn 等）；minZoom/maxZoom 限制缩放范围；file:// 协议（直接双击打开 html）下地图异常？// 开头）。建议把页面放到本地 Web 服务（如 nginx、IIS、http-server 等）下通过 http://localhost 访问，或使用 https:// 的完整引入地址。<img> 加载，不存在跨域限制；<script> 标签加载，也不受同源策略限制；XMLHttpRequest/fetch 直接调用船讯网数据接口时才可能遇到跨域问题，请优先使用 API 封装好的服务类（如船位、轨迹服务）而不是裸调接口。$ is not defined 或 jQuery 冲突？jquery.min.js 在 API 主文件之前引入；noConflict 隔离。7. 效果示意
fitWorld() 的效果），即整个世界地图完整呈现在窗口内；至此，您已经完成了平台接入。下一步请阅读《7.2-地图引擎基础：地图控制与业务绘制》，学习初始化参数、内置控件、图源切换与点/线/面标注绘制。