如何使用WRLD使用实时数据创建购物中心地图

>本教程展示了使用WRLD构建交互式的实时3D购物中心地图，从而通过动态商店信息和导航来增强用户体验。 我们将创建两个演示：一个将交互标记添加到室内购物中心地图中，另一个显示带有彩色多边形的停车能力。 完整的项目可在GitHub上找到。

>

>除了简单的Google地图之外，WRLD允许使用交互式标记的室内3D地图，提供独特的用户体验和In-Map UI交互。

此教程封面：

• >设置：>获取WRLD API密钥并准备开发环境（Node.js，npm，Yarn）。
>
• >>两种方法：使用WRLD的内置工具（地图设计器，Plote Designer）用于无代码解决方案，或构建自定义应用程序以提高灵活性。
• >室内地图控件：在购物中心内实现容易地面导航的控件。
>
• >自动室内视图：设置地图自动加载到室内视图中。
>
• >自定义商店卡：创建显示实时数据的动态商店卡（促销，可用性）。
停车可用性可视化：
• 使用彩色多边形代表停车位的占用。

>先决条件： 对JavaScript DOM，ES6语法和ES6模块的基本理解。 熟悉WRLD平台是有帮助的，但不需要。>

入门：

>创建一个免费的WRLD帐户并获取您的API键（有关说明，请参见“构建动态3D地图”）。

构建地图（自定义应用程序方法）：

>

1. >项目设置：创建一个项目文件夹，初始化package.json，然后创建必要的目录和文件（src/js，src/css，index.html，app.js，app.css，app.css，env .js）。
2. >依赖项：> installwrld.js，axios，babel（用于ES6编译），Parcel（Bundler）和JSON Server（用于虚拟API）。
3. api键：>将您的WRLD API键添加到>。env.js>。
4. 基本地图：使用in Wrld.map()创建基本地图，指定API键，中心坐标，缩放级别，并启用室内地图。 app.js
>室内控件：
5. 添加必要的脚本（jQuery，jquery ui，）和一个容器div（）到indoor_control.js>。初始化widget-container>的室内控制 index.html>app.js>自动室内条目：
从
6. >事件中确定室内地图ID，并使用>自动在MAP LOAD上输入室内视图。> indoormapentermap.indoors.enter()存储卡数据：
创建一个文件夹，并用包含存储信息（坐标，联系人详细信息，开放时间）填充它。 运行
7. 创建本地API服务器。> 存储卡设计和实现：data创建商店卡（使用JSrender）和服务（db.json）的HTML模板从JSON服务器获取数据。实现弹出式服务（json-server --watch data/db.json），以在单击标记中显示弹出窗口中的商店卡。将标记添加到
>中的地图，附加单击侦听器以触发弹出服务。
8. >停车可用性：创建一个单独的HTML文件（api-service.js）和JavaScript文件（popup-service.js）。 收集停车区的坐标，并使用app.js创建多边形。 使用颜色编码代表停车位。使用socket.io实现实时更新（install
，
9. ）。创建一个自定义服务器（）来处理socket.io连接和广播停车更新。更新客户端代码以侦听和处理这些更新。 parking.html parking.jsWrld.polygon() socket.io socket.io-client这种详细的故障为构建这些交互式3D地图提供了综合指南。请记住，请咨询提供的链接，以获取完整的代码片段和更多详细信息。 扩展这些演示的可能性是巨大的，可以与现实世界中的数据源集成和广泛的应用程序。

以上是如何使用WRLD使用实时数据创建购物中心地图的详细内容。更多信息请关注PHP中文网其他相关文章！