| 【Axure JS】Axure中利用JSBOX制作3D高德地图组件（基础） | 您所在的位置：网站首页 › 利用高德地图赚钱 › 【Axure JS】Axure中利用JSBOX制作3D高德地图组件（基础） |
【Axure JS】Axure中利用JSBOX制作3D高德地图组件（基础）
|
JSBOX 是一个面向 Axure 提供便捷开发方式的组件，我们将用它来制作可以显示三维白模的高德地图组件，下面是制作步骤， 可以先 点击此处预览效果 1、添加 JSBOX将JSBOX标准版组件拖进Axure，可以见到JSBOX的载体就是一个空白的中继器： 
2、编写代码
注：不想了解代码的童鞋请到文末直接下载完成后的3D地图组件 准备工作首先我们需要到 高德开发者中心 注册高德开发者账号生成 Web端的JS API Key，你会得到一串字符，等会生成高德地图的时候需要用到这串 Key。
引入高德地图
让我们双击JSBOX组件进入编辑模式。在文本域里输入以下代码，并把代码中 您的API-KEY 替换为刚才在开发者中心生成的Key，最点击预览即可看到三维地图（可以用左键随意拖动和用右键旋转与改变视角）： // 引入高德地图JSAPI Loader({ load: [`//webapi.amap.com/maps?v=2.0&key=您的API-KEY`], complete: () => AMap.plugin(['AMap.Geocoder','AMap.ControlBar'], main) }); // 程序入口 function main() { // 初始化地图 let map = new AMap.Map(THIS.vid, { resizeEnable: true, //允许缩放 zoom: 17, //缩放等级 zooms: [3,20], //缩放等级范围 expandZoomRange: true, //扩展缩放范围 rotateEnable: true, //允许旋转 rotation: -15, //初始旋转角度 pitchEnable: true, //允许倾斜 pitch: 60, //倾斜角度 viewMode: '3D', //开启3D视图,默认为关闭 buildingAnimation: true, //楼块出现是否带动画 }); }
调整地图尺寸
现在地图可视区域显得很小，我们可以在JSBOX的交互设置中展开 修改容器外观 ，并调整容器尺寸为 800 × 480 或其他尺寸，即可扩大地图显示区域：
总结
在本篇里你学会了： 如何在 JSBOX 里贴入代码调整 JSBOX 容器的尺寸用 JSBOX 生成高德三维地图在 下一篇 里，我将会讲解如何在 JSBOX 里读取中继器上配置的数据，实现在界面上即可让用户设置地图初始的中心地点、视角、缩放、隐藏高德Logo等便捷操作，并免费提供完整版的三维地图组件下载。 相关资料JSBOX 相关方法的文档说明在这里可以查看： Axure扩展库: 为Axure原型开发提供便捷的方法调用 JSBOX 组件下载（支持Axure 9.x及更高版本）： 立即下载访问密码：8397 原文链接：https://blog.csdn.net/qq_31483645/article/details/129591567 原创文章，作者：院长大大，如若转载，请注明出处：https://www.axureschool.cn/291170.html |
【本文地址】
公司简介
联系我们