在很多外卖APP中,当我们点完外卖后,会有地图显示骑手的位置。实现效果如下图:
而如何将地图嵌入原型之中呢,请往下继续看。
在本例中,点击鼠标左键可以对地图进行拖动,可以使用鼠标滚轮实现地图的放大和缩小。
第一步:
选择元件:内联框架。
设置其属性:1、框架滚动条--从不显示。
2、隐藏边框
3、预览图片--地图
第二步:
鼠标双击框架打开链接属性设置界面,界面中选择【链接到url或文件】,链接中填写“mymap.html”。
第三步:打开百度地图生成器,创建地图,链接:http://api.map.baidu.com/lbsapi/creatmap/
1、设置定为中心点。
2、设置地图
3、点击【获取代码】,并获取密钥,按照提示即可获取。
第四步:新建一个文本文档,将复制的代码粘贴到其中,将密钥填入到适当位置。保存文档,将文件命名为:mymap.html,要将文档后缀名改成html。
第五步:将原型转化为html文件,将刚才生成的mymap.html放到这个文件夹中。
第六步:再次通过生成原型查看HTML文件,地图就能够正常显示了。
最后贴一下最近学Axure的学习教程