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

原创 已于 2024-11-06 16:50:22 修改 · 1.9k 阅读 · 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中贴入代码、调整容器尺寸以及生成高德三维地图。

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

1. 添加 JSBOX

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

2. 编写代码

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

准备工作

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

引入高德地图

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

最低0.47元/天 解锁文章
Axure中利用JSBOX制作3D高德地图组件（进阶）
qq_31483645的博客
03-18 1859
JSBOX 是一个面向 Axure 提供便捷开发方式的组件你可以用 JSBOX 制作其他零代码配置的交互式组件。
Axure中继器组件化GIS地图
司马沉潇的专栏
04-23 4857
虽然可以使用JavaScript注入的方式将GIS地图嵌入Axure，但每次使用地图都需要重复嵌入并修改代码，不太方便。那么，能不能实现组件化呢？我们可以使用中继器（repeater）将常用的地图参数提取出来，通过使用中继器来实现GIS地图的组件化。
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元件库组件库（省份+直辖市+自治区+行政特区)
weixin_38671127的博客
12-26 1155
用户还可以根据需要，使用不同的颜色、样式和动画效果来突出显示某个地区或展示数据变化的趋势。通过使用这个中国动态地图Axure元件库组件库，用户可以更加直观地展示中国各地区的信息，同时也能够更加灵活地控制地图的交互和显示效果。中国动态地图Axure元件库组件库包含了中国的省份、直辖市、自治区和行政特区等地区的元件。这个组件库可以用于设计和模拟动态地图，帮助用户更好地展示中国地区的数据和信息。用户可以根据自己的需要，将这些元件拖放到Axure的画布上，并根据实际情况进行调整和定制。
精选资源
Axure数据可视化图表组件库(AxureUX图表+地图)
06-28
一套数据可视化图表通用组件库，主要由Antv静态图表、Axhub动态图表、地图组件素材三部分内容组成，其中包含了几十种常用图表类型和全国34个省级行政区地图，可以满足大部分的原型设计图表展示需求。 Antv静态图表...
Axure9使用高德地图自定义样式无效（非密钥问题）
m0_56355206的博客
12-26 335
使用Axure9制作静态网页时，虽然可以调用高德地图，但是发现不能使用自定义样式。
Axure嵌入Gis地图--javascript (js)注入
司马沉潇的专栏
12-07 2322
Gis是软件信息化的重要模块，因此Axure也会常引用地图，特别是在做数据可视化。常用的方式是通过内联框架，但是这种方式样式和地图内容都无法修改。本文以高德地图为例介绍如何通过js注入实现自定义Gis地图的嵌入。 本文详情地址： 1、地图构建 打开高德地图API官网，由于是通过js注入的方式进行嵌入。所以选取了异常加载地图方式，这样加载可以更加丝滑。示例地址https://lbs.amap.com/demo/javascript-api/example/map-lifecycle/asynchronou.
Axure插入ArcGIS地图或天地图
Q的博客
11-02 3119
Axure中插入地图 在ArcGIS Online中用webappbuilder或者Experience builder做好地图页面发布，然后在Axure的内联框架元件中输入发布好的地图地址。 正文完，以下都是废话。 最近需要做一个地理信息系统的原型，原来简单点的，我都是直接用ArcGIS的webappbuilder直接做，但是这次需求比较复杂，地图只占一小部分，wab内置模板就那么点，限制太多，又没时间学习使用开发者版本，所以领导建议我用专业的原型软件Axure，这是背景。 之前从来没用过Axure，第一
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 382
Axure中的中国地图组件特别适用于原型设计阶段，它为产品经理和设计师提供了一种高效的方式来构建包含地理信息的交互原型。特点：提供了23个省份、4个直辖市、5个自治区及2个特别行政区的详细地图元件，支持数据填充和交互设置，如鼠标移入显示数据，适用场景：原型设计阶段，快速构建交互原型。
全新升级，EasyV 3D高德地图组件全新上线
amumuum的博客
03-13 1529
我们依托该服务上线了【高德地图】组件，来帮助EasyV用户更快、更好地构建出基于地图的可视化应用。
深入解析visgl/react-google-maps中的3D地图组件实现
最新发布
gitblog_01170的博客
06-28 415
本文将详细介绍如何在visgl/react-google-maps项目中实现3D地球可视化功能，通过分析其核心组件`Map3D`的实现原理和使用方法，帮助开发者理解如何在自己的React应用中集成3D地图功能。 ## 3D地图组件概述 `Map3D`是基于Google Maps Platform最新实验性功能`Map3DElement`开发的React组件，它能够渲染出精美的3D地球效果。这个...
vue组件，echarts制作3D地图，可点击凸起，hover高亮，可做飞鱼线（带天空盒子）
qq_45234022的博客
11-16 5785
整理了一下Echarts做3D地图的vue组件
python 实现对地图的点击_python使用folium库绘制地图点击框
weixin_39861955的博客
11-21 364
python使用folium 库生成地图网页的具体代码，供大家参考，具体内容如下folium 官网import foliumimport pandas as pddef mark_map(data):"""带有标注的地图:param data::return:"""# 地图制作myMap = folium.Map(location=[20, 0], tiles="Mapbox Bright", z...
评论 3
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值