Axure中利用JSBOX制作3D高德地图组件

原创 已于 2024-11-06 16:50:22 修改 · 1.8k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#axure

于 2023-03-18 15:23:10 首次发布
本文介绍了如何在Axure中利用JSBOX组件制作3D高德地图。首先，需添加JSBOX组件并注册高德开发者账号获取API Key。接着，通过编辑JSBOX代码并替换Key以引入高德地图。最后，调整JSBOX容器尺寸以优化地图显示。通过这个教程，读者将学会在JSBOX中贴入代码、调整容器尺寸以及生成高德三维地图。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

JSBOX 是一个面向 Axure 提供便捷开发方式的组件，我们将用它来制作可以显示三维白模的高德地图组件，下面是制作步骤，可以先 点击此处预览效果

1. 添加 JSBOX

将JSBOX标准版组件拖进Axure，可以见到JSBOX的载体就是一个空白的中继器：

2. 编写代码

注：不想了解代码的童鞋请到文末直接下载完成后的3D地图组件

准备工作

首先我们需要到 高德开发者中心 注册高德开发者账号生成 Web端的JS API Key，你会得到一串字符，等会生成高德地图的时候需要用到这串 Key。

引入高德地图

让我们双击JSBOX组件进入编辑模式。在文本域里输入以下代码，并把代码中

最低0.47元/天 解锁文章

200万优质内容无限畅学
Axure中利用JSBOX制作3D高德地图组件（进阶）
qq_31483645的博客
03-18 1737
JSBOX 是一个面向 Axure 提供便捷开发方式的组件你可以用 JSBOX 制作其他零代码配置的交互式组件。
Axure插入ArcGIS地图或天地图
Q的博客
11-02 2932
Axure中插入地图 在ArcGIS Online中用webappbuilder或者Experience builder做好地图页面发布，然后在Axure的内联框架元件中输入发布好的地图地址。 正文完，以下都是废话。 最近需要做一个地理信息系统的原型，原来简单点的，我都是直接用ArcGIS的webappbuilder直接做，但是这次需求比较复杂，地图只占一小部分，wab内置模板就那么点，限制太多，又没时间学习使用开发者版本，所以领导建议我用专业的原型软件Axure，这是背景。 之前从来没用过Axure，第一
全新升级，EasyV 3D高德地图组件全新上线
amumuum的博客
03-13 1461
我们依托该服务上线了【高德地图】组件，来帮助EasyV用户更快、更好地构建出基于地图的可视化应用。
深入解析visgl/react-google-maps中的3D地图组件实现
最新发布
gitblog_01170的博客
06-28 368
深入解析visgl/react-google-maps中的3D地图组件实现 本文将详细介绍如何在visgl/react-google-maps项目中实现3D地球可视化功能，通过分析其核心组件Map3D的实现原理和使用方法，帮助开发者理解如何在自己的React应用中集成3D地图功能。 3D地图组件概述 Map3D是基于Google Maps Platform最新实验性功能Map3DElement开发...
Axure 手机地图组件库
06-09
提供Axure工具用于手机原型设计的地图组件。包含图标、动态曲线等
Axure 3D教程：制作3D地图原型（三维世界地图）.docx
05-30
Axure 3D教程：制作3D地图原型（三维世界地图）.docx
Axure的地图元件库5.5制作
12-19
Axure的地图元件库，5.5制作，只能在5.5下面导入，其他版本无法使用。
Axure中继器组件化GIS地图
司马沉潇的专栏
04-23 4740
虽然可以使用JavaScript注入的方式将GIS地图嵌入Axure，但每次使用地图都需要重复嵌入并修改代码，不太方便。那么，能不能实现组件化呢？我们可以使用中继器（repeater）将常用的地图参数提取出来，通过使用中继器来实现GIS地图的组件化。
Axure9使用高德地图自定义样式无效（非密钥问题）
m0_56355206的博客
12-26 305
使用Axure9制作静态网页时，虽然可以调用高德地图，但是发现不能使用自定义样式。
Axure数据可视化图表组件库(AxureUX图表+地图)
06-28
一套数据可视化图表通用组件库，主要由Antv静态图表、Axhub动态图表、地图组件素材三部分内容组成，其中包含了几十种常用图表类型和全国34个省级行政区地图，可以满足大部分的原型设计图表展示需求。 Antv静态图表...
Axure嵌入Gis地图--javascript (js)注入
司马沉潇的专栏
12-07 2208
Gis是软件信息化的重要模块，因此Axure也会常引用地图，特别是在做数据可视化。常用的方式是通过内联框架，但是这种方式样式和地图内容都无法修改。本文以高德地图为例介绍如何通过js注入实现自定义Gis地图的嵌入。 本文详情地址： 1、地图构建 打开高德地图API官网，由于是通过js注入的方式进行嵌入。所以选取了异常加载地图方式，这样加载可以更加丝滑。示例地址https://lbs.amap.com/demo/javascript-api/example/map-lifecycle/asynchronou.
Axure地图搜索交互
12-21
效果实现教程地址：https://blog.youkuaiyun.com/qq_27884377/article/details/85146788
axure元件库_常用元件库_axure元件_（兼容Axure9）ElementUI元件库_大合集_中国地图axure组件
03-03
包括library.ant.design_Mob、library.ant.design_Web_3.0、Material Design lcon Library、refs-chart-data图表元件库、Refs数据图表元件库、 、内部控件库AntD_Library、常用图标-SZ、蚂蚁金服体验中心WEB端元件库、微信小程序WEUI AXURE组件、中国地图axure组件、
Axure数据可视化图表组件库(AxureUX整理).rar
11-16
本作品是由AxueUX整理的一套数据可视化图表通用组件库，主要由Antv静态图表、Axhub动态图表、地图组件素材三部分内容组成，其中包含了几十种常用图表类型和全国34个省级行政区地图，可以满足大部分的原型设计图表展示需求。Antv静态图表整理自蚂蚁数据可视化团队发布的相关图表设计资源，支持文字、色彩等元素修改。动态图表来自于Axhub Charts，支持图表配置和动态展示效果，详细的配置说明请查看下方链接。地图组件元素来自于Datav全国地图选择器，支持背景颜色、边框等元素修改。
Axure最全组件库
03-21
Axure最全组件库 10PX Android.rplib android widget by YEFAN.rplib Android手机外壳及UI组件库.rplib Android组件库.rplib Axure RP社交网络元素库.rplib AxureRP-win7phone-AxureRP-Library.rplib Axure反馈表单.rplib Axure图标 (16x16).rplib Axure图标(32x32).rplib Better Defaults .rplib ClearTextValueOnFocus_conetrees.rplib Content.rplib DGI_touchscreen_handgestures.rplib facebook-like.rplib icon-UX_People.rplib Icons_Audio.rplib iOS iPad Wireframe.rplib ipad.rplib iPhone-Bodies.rplib JQuery Mobile.rplib Mobile-android_DSK (2).rplib Mobile-android_DSK.rplib mobile-iPhone-Horizontal.rplib mobile-iPhone-UI.rplib modest_mouse_cursors.rplib Sharing.rplib Shopping.rplib Slider_Library_by_truematter.rplib social_media_icons_vim_interactive.rplib Tabs.rplib VoteFor_Smileys_(erric).rplib WidgetLib_v1.rplib win7phone-Library.rplib.rplib 图标组件库.rplib 图表和表格.rplib 导航和分页.rplib 屏幕分辨率.rplib 幻灯片.rplib 广告位.rplib 广告位标准尺寸组件库.rplib 手机-General.rplib 手机-iPhone.rplib 手机-iPhone_Y!DSK.rplib 控制条.rplib 操作系统元素.rplib 操作系统窗口.rplib 文本模板.rplib 日历.rplib 窗体和容器.rplib 网站常用部件.rplib 草稿样式库文件.rplib 菜单和按钮.rplib 表格元素.rplib 输入框.rplib 页面布局.rplib
【Axure素材】中国地图组件
SJjiemo的博客
12-10 276
Axure中的中国地图组件特别适用于原型设计阶段，它为产品经理和设计师提供了一种高效的方式来构建包含地理信息的交互原型。特点：提供了23个省份、4个直辖市、5个自治区及2个特别行政区的详细地图元件，支持数据填充和交互设置，如鼠标移入显示数据，适用场景：原型设计阶段，快速构建交互原型。
中国动态地图Axure元件库组件库（省份+直辖市+自治区+行政特区)
weixin_38671127的博客
12-26 928
用户还可以根据需要，使用不同的颜色、样式和动画效果来突出显示某个地区或展示数据变化的趋势。通过使用这个中国动态地图Axure元件库组件库，用户可以更加直观地展示中国各地区的信息，同时也能够更加灵活地控制地图的交互和显示效果。中国动态地图Axure元件库组件库包含了中国的省份、直辖市、自治区和行政特区等地区的元件。这个组件库可以用于设计和模拟动态地图，帮助用户更好地展示中国地区的数据和信息。用户可以根据自己的需要，将这些元件拖放到Axure的画布上，并根据实际情况进行调整和定制。
vue组件，echarts制作3D地图，可点击凸起，hover高亮，可做飞鱼线（带天空盒子）
qq_45234022的博客
11-16 5328
整理了一下Echarts做3D地图的vue组件
axure9制作游戏地图
03-31
<think>好的，我现在需要帮助用户了解如何使用Axure 9设计游戏地图。首先，我需要回顾一下用户提供的引用内容，看看有没有相关的信息可以利用。引用1提到的是Axure RP 9的基础教程，特别是制作iPhone应用原型，这可能对界面设计有帮助。引用2是关于使用JSBOX制作3D高德地图组件，这可能涉及到地图的交互和3D效果，这对用户的问题应该非常相关。引用3讨论了交互样式，这对于创建地图的交互功能很重要。 接下来，我需要整合这些信息，构建一个分步骤的教程。首先，用户可能需要设置画布，确定地图的尺寸和背景。然后，绘制地图元素，比如地形、道路、建筑物等。Axure的基础形状工具应该可以完成这些。接下来是添加交互元素，比如点击区域或悬停效果，这里需要引用3中的交互样式知识。可能还需要动态面板来实现切换或动画效果，比如地图的缩放或不同区域的显示。 然后，用户可能需要使用JSBOX来集成3D地图组件，如引用2中提到的，这可以通过下载现有的组件并导入到Axure项目中。需要解释如何嵌入高德地图的API，或者使用现有的组件来实现3D效果，这可能涉及到JavaScript代码，但引用2提供了示例文件，用户可以下载并参考。 此外，可能还需要设置事件处理，比如点击某个区域触发弹出信息或导航，这需要用到交互事件和动态面板的状态切换。测试和优化也是重要的一步，确保交互流畅，没有错误。 最后，用户可能需要导出和共享原型，供团队或客户查看。同时，生成相关问题，帮助用户进一步学习，比如性能优化、高级交互设计或与其他工具集成的问题。 需要注意的是，用户的问题是关于游戏地图的设计，可能需要更强调游戏元素的交互性，比如可点击的角色、任务提示或动态变化的地图。可能需要结合基础教程中的界面操作和进阶的JSBOX组件来实现复杂的3D效果或实时交互。确保每个步骤都清晰，并引用相关的资料来支持说明，比如在添加3D地图时引用[^2]，在交互样式部分引用[^3]。</think>### 使用Axure 9创建交互式游戏地图的步骤 #### 1. **设置画布与背景** - 新建Axure文件，根据游戏地图尺寸调整画布大小（例如：1920×1080像素）。 - 通过**矩形工具**或**图片组件**添加地图背景（如网格地形、手绘地图或导入图片）[^1]。 #### 2. **绘制地图元素** - 使用**形状工具**绘制道路、河流、建筑物等静态元素，设置颜色和样式。 - 为关键区域（如任务点、敌人位置）添加图标，右键选择**转换为动态面板**以实现后续交互。 #### 3. **添加交互功能** - **悬停提示**：选中图标 → 右键“交互样式” → 设置悬停效果（如颜色变化+文字提示）。 - **点击事件**：为任务点添加“单击时”事件 → 显示隐藏的动态面板（包含任务描述）。 - **地图切换**：使用动态面板的“状态”功能，实现不同区域或缩放级别的切换。 ```示例：点击触发任务弹窗 1. 选中任务点图标 → 添加“鼠标单击时”事件 2. 选择“显示/隐藏” → 勾选任务描述面板 → 设置动画效果（如渐显） ``` #### 4. **集成3D地图组件（进阶）** - 下载引用中的3D高德地图组件（`.rp`文件），通过**菜单 → 文件 → 导入**加载。 - 在组件属性中调整经纬度、缩放级别，通过**JSBOX**调用高德API实现地图交互（需基础JavaScript知识）。 #### 5. **测试与优化** - 使用**预览模式**（F5）测试所有交互事件。 - 对复杂动态面板设置“载入时自动隐藏”，避免初始显示错乱。 --- ###
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值