axure8.0快速入门新手教程：地图

现在有关于地图的设计越来越多了，因为这个手机的GPS定位功能，地图更是让众多的软件开发商使用得恰到好处。比如高德使用地图来导航，微信使用地图来位置共享，甚至最近流行的摩拜单车更是使用地图来寻找共享单车。一些只懂axure基础的人画产品原型往往是使用一张图片来表示地图，但如果你让老板看到你画的产品原型中，地图是一个拥有可拖动放大缩小等逼真功能的逼真地图，那相比于别人你是不是更容易进入老板的视线呢？

制作这么一个地图的原型也不复杂，学会了以后使用就是分分钟的事，这里就不多说废话了，这一章就教大家如何结合 axure8.0 和百度地图来制作逼真的地图原型。

第一步：拖拉摆放好相关控件

其实就4样东西，一个手机壳外表、一个蓝底蓝框的矩形，一个白底白框的矩形和一个内联框架。其中白底白框的矩形正中间有“搜地点、查公交、找线路”字样。

第二步：设置内联框架的属性

设置内联框架的框架目标为map.html，框架滚动条为从不显示，预览图片为地图。

第三步：制作map.html文件

首先，进入百度的地图开放平台（http://lbsyun.baidu.com/），【开发】——【地图生成器】

然后，设置定位中心点，设置地图和添加标注，可根据自己的需求设置参数，也可以使用默认参数。我这里使用的都是默认参数。

接着，获取代码以及申请秘钥

点击下方的获取代码按钮生成地图代码，点击右方的申请密钥按钮获取密钥字符串，如果不知道如何申请，也可以查看上方的《了解如何申请密钥》。

最后，修改并保存地图代码

将地图代码拷贝出来，对地图代码做两个地方的修改后保存成map.html文件，并将map.html放在原型生成的html文件夹根目录上。

打开原型的html代码，就可以看到地图了，还可以在地图上进行拖动、放大、缩小等等操作。同时也可以随时关注我的网站： http://niubipm.cn ，因为工作过程中有很多这些axure原型设计小技巧的例子，所以我会坚持分享下去，希望对大家有帮助，你们对我的关注就是我的动力。

效果图： axure原型设计之地图

作者：维度转载请注明出处： http://niubipm.cn/a/chanpinsheji/Axure/2018/0505/182.html