Axure中利用JSBOX制作3D高德地图组件-Toy模板网

这篇具有很好参考价值的文章主要介绍了Axure中利用JSBOX制作3D高德地图组件。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

1. 添加 JSBOX

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

axure地图组件,Axure,axure

2. 编写代码

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

准备工作

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

axure地图组件,Axure,axure

引入高德地图

让我们双击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, //楼块出现是否带动画
  });
}

axure地图组件,Axure,axure