【教程】用axure写个小地图

在设计产品原型时，经常会遇到调用地图的交互。

一般情况下，我们会这样做：

在原型稿地图位置，用图片组件占位，然后标明百度地图

之后在需求说明书中，会说明右侧内容需引用百度地图，并且左侧的查询条件，在点击查询时，右侧地图需要执行。

但实际上，只需通过简单几步，我们可以让这个交互页面逼格爆炸式提升。

首先，将右侧图片组件，更换为inline Frame组件：

该组件尤其适合如地图、视频这种需要限制宽高的内容盛放。也适用于当动态面板内容过于复杂时，替代动态面板实现相同的切换效果

然后将该Frame组件设置为，不需要滚动，以及无边框：

另外可以将该组件默认显示为map样式，这样是否比原来标注百度地图，逼格高出一点点呢（666）。

选择map样式后，该组件会在加载完成即展示为map样式

并且我们可以双击inline Frame给予一个初始默认的URL地址，这样生成原型后，打开html默认展示的就是这个地址：

将其外部链接设置为百度地图的位置

先生成HTML看一下效果：

第二步，我们给查询按钮赋予事件，使之将文本框（我命名为location-TF）中键入的文字，传给inline Frame，使之生成一个链接地址，然后打开链接地址即可。

2.1 将文本框命名为location-TF，其它名字也可以，只要可以识别；

2.2 将location-TF设置为搜索框样式：

文本输入框可以设置多种样式，包含密码、日期等。方便我们在做原型时快速的做出对应的表单

2.3 在location-TF中给出提示文字：键入查询地址，并设置灰色。

2.4 设置事件，使得文本框获取焦点时，会自动清空内容。我们选中location-TF，并在右侧的事件面板中，设置如下：

选择set text事件，使得文本框获取焦点时，将组件location-TF中的value清空，保存即可。

2.5 我们研究下百度地图，不同地区的URL格式（URL传参），找出变量位置在哪里。这里建议直接在百度中随便查询一个地方，以上海为例，得到结果如下：

TIP:一定要在百度中搜索地图，如果在百度地图中搜索，是看不到带有变量的URL地址的

打开第一条，得到链接地址：

这个链接地址中的【上海市】即是查询的内容

2.6 基于上一步，我们找到了百度地图URL地址中的参数位置，现在，我们只要把location-TF中的内容，在点击查询后，给到inline Frame就可以了。

我们对查询按钮赋予如下事件，使得查询按钮在onclick时，打开inline Frame的链接。由于打开的链接是来自百度的，因此我们要选择打开外部链接（Link to an external url or file）

然后点击右下角的函数fx，设置变量：

在打开的窗口中，我们需要设置个局部变量，使其的值等于文本框location-TF中键入的内容：

局部变量名LAVR1可以自定义

然后在上面的文本框中，贴出百度地图-上海市地图的URL地址：

在贴入后，我们发现上海市不见了，这是因为对中文字转码的影响，没关系，我们对比下原来的URL地址（图2），对比出转码部分即可：

通过对比：3D和%26中间的这部分，就是被转码的上海市

我们删掉3D和%26部分的内容：

然后点击插入局部变量（insert variable of function…），将变量【LVAR1】插入进去即可：

2.7 上述保存完毕，按H5快速生成HTML文件试试吧：

键入南京市，点击查询后，右侧即执行南京结果。

该文章同步发布于知乎我的专栏（https://zhuanlan.zhihu.com/p/43924192），欢迎围观。

欢迎转载~