编辑导读：如何使用Axure实现自定义地图显示？在本文中，作者演示并总结了如何在Axure中设置相应参数，实现预览时自定义地图显示效果的操作过程，一起来看看。

本文通过Axure高德自定义地图功能，在Axure中配置相关参数，最终实现预览中自定义地图显示的效果。

00-1010高德提供自定义地图配置功能和html代码，可通过前端工具转换为js格式；Axure可以直接调用javascript，通过这个函数结合高德传输的js，可以显示预览时创建的自定义地图。高德提供的自定义地图中有相当多的参数。通过Axure的局部变量，可以将Axure中配置的参数传递给js，最终实现地图样式的自定义配置。具体操作步骤如下。

00-1010

一、实现原理

进入高德开发者平台(注册地址：点击注册)，注册完成后点击控制台进入配置页面。

00-1010进入工作台后，依次点击应用管理-我的应用-新建应用。

在弹出的对话框中，根据要求完善信息，点击新建按钮创建成功。

应用创建成功后，点击应用名称栏中的添加按钮，根据弹出对话框中的要求完善信息。注意：请选择服务平台的Web端(JS API)，否则生成的密钥将不可用。

密钥添加成功后，我们可以在列表中看到生成的密钥，并复制它以备后用。

00-1010，进入高德自定义地图配置页面，可以选择要创建的模板，也可以直接新建模板，操作完成后进入地图配置页面。

在地图配置页面，我们可以配置地图的内容，包括但不限于显示、颜色等。在这里，我们可以根据自己的需要进行设置。设置完成后，点击发布按钮，即可成功发布地图。

地图发布成功后，回到自定义地图管理页面，找到配置好的地图卡，点击共享按钮，就可以在新页面中获取地图的调用地址，并复制下来以备后用。

00-1010，进入高德JS API的样例页面，可以看到高德提供的默认地图样式，分布如下。

在编辑区域，高德提供了默认的示例代码。用步骤2和步骤3中获得的值替换关键点和地图样式后，单击运行按钮，您可以预览我们创建的自定义地图样式。

二、高德地图配置

这一步需要知道失去的前端体验，但对于产品经理来说应该不难。

众所周知，高德提供了相当多的参数来控制地图的显示，这里可以获得。在地图类中，有所有可以控制地图显示的参数。我们可以根据自己的需要复制相应的参数，并将其添加到步骤4中的样式中。格式参考高德提供的样本代码。

如下图，添加显示模式后，是否允许缩放，缩放级别等。再次点击Run，我们可以得到一个外观很酷的地图模型。代码放在下面，可以根据实际需要更换。替换完成，预览成功后，我们得到一个html文件，可以复制供以后使用。

var map=新的AMap。地图(' conta

iner’, {

resizeEnable: true,

viewMode: ‘3D’,

pitch:60,

showBuildingBlock:true,

rotation:35,

zoomEnable:false,

zoom:18,

center: [117.19199,34.263464],

三、html转js

熟悉Axure的同学都知道Axure可以引用js，而html可以转为js格式，通过如下转换工具即可实现互转。在左侧填写我们上一步骤获取的html代码，右侧即可生成我们需要的js了，将代码复制下来备用。

四、Axure引用js进行展示

打开Axure，新建一个页面，在页面中添加一个内联框架并设置其尺寸为所需要的尺寸，此案例中由于需要将地图作为背景设计可视化页面，所以在页面加载中添加配置将内联框架尺寸设置为与窗口大小一致。

双击内联框架，配置其链接属性，选择连接到url或文件，点击fx函数配置按钮，在弹出的页面中即可输入在第三步中获取的js代码了，配置完成后点击确定按钮，即配置完成。

注意：在代码第一行需要添加声明：javascript：

配置完成后，按F5进行预览，就能够看到我们配置的效果。

到此步，我们就能够实现基本的地图展示了，但是如果需要修改样式的话，还是需要进行代码层面的调整，然后再重新进行操作，流程复杂。那么借用Axure中的局部变量，Auxre也能够实现参数的传递，从而实现Axure中配置好变量，预览时候就能变化了，以下讲具体操作步骤。

五、通过表格实现参数传递

1. 添加参数维护表格

在页面中添加一个3列的表格，分别命名为item、value、描述，其中item代表的是参数名称，value代表参数值，描述对应参数描述，方便时间长了忘记参数的意思了，配置完成后将2.5章节中的参数即参数值配置到表格中，得到下表。

2. 参数绑定

对表格中的value列单元格设置单元格名称，建议与item保持一致，方便下一步的操作。

单元格名称配置完成后，进入到内联框架链接编辑页面，先添加一系列局部变量，变量名称与变量名一致，变量值取对应的单元格中的元件文字，如下图对所有可配置的参数添加局部变量。

局部变量添加完成后，将上方编辑框中写死的值替换为对应的局部变量，保存。

完成此步后，添加的参数表格内容就与js中的参数进行了绑定，我们可以尝试根据要求对参数值进行修改，如将3D修改为2D，此时再次预览，就可以看到页面根据参数产生了变化。

最后将参数表格设置为载入后隐藏，预览时候就只展示地图页面了，到此设置完成。

六、结语

通过该案例，我们能够大概了解一些前端的开发知识。曾经有一个问题是产品经理需不需要懂开发，个人认为产品经理不一定要写代码，但是要懂得研发的逻辑，而Axure就是一个我们去了解研发逻辑的工具，当哪一天研发跟你说这个需求实现不了的时候，你就可以把原型扔出来，告诉他：

“我原型都能画出来，你说代码实现不了？”

本文由 @OMINI_BASS 原创发布于人人都是产品经理。未经许可，禁止转载

题图来自Unsplash，基于CC0协议