AxureRP8实战手册-案例10(内联框架:嵌入百度地图)

AxureRP8.0教程 小楼一夜听春语 22290℃ 0评论

 

案例10.   内联框架:嵌入百度地图

案例来源:

百度糯米-商品详情

 

案例效果:

  • 页面打开时:(图1-59)

1_59

 

案例描述:

在页面中嵌入百度地图页面,地图可以使用<鼠标左>键按住拖动,也可以通过<鼠标滚轮>进行缩放。

 

元件准备:

  • 页面中:(图1-60)

1_60

操作步骤:

1、鼠标双击框架打开链接属性设置界面;界面中选择【链接到url或文件】,{超链接}中填写“mymap.html”。(图1-61)

1_61

 

 

2、打开百度地图开放平台,网址:http://developer.baidu.com/。在【开发】菜单中选择【地图生成器】;(图1-62)

1_62

 

3、接下来“html”文件的制作:

  • 设置地图中心点,此处以“国贸”为例;(图1-63)

1_63

 

  • 设置地图尺寸、显示的内容以及其他功能;(图1-64)

1_64

 

  • 设置地图的标注;(略)
  • 点击【获取代码】按钮,获取地图代码。代码中需要写入地图API的密钥,点击【申请密钥】进行获取;如果不知道如何获取,可以查看页面上的“了解如何申请密钥”。(图1-65)

1_65

 

  • 在本地新建一个文本文档;将地图代码复制,粘贴到新建的文档中;将申请的密钥添加到文档中指定位置;(图1-66)

1_66

 

  • 将文档保存,然后将文档名称修改为“mymap.html”。(图1-67)

1_67

 

4、将制作好的原型生成HTML文件,将“mymap.html”文件添加到生成的HTML文件夹中;(图1-68)

1_68

 

5、再次通过生成原型查看HTML文件,地图就能够正常显示了。(图1-69)

1_69

 

补充说明:

  • 操作步骤2中的HTML文件命名,此处以命名为“mymap.html”为例。
  • 操作步骤4中,修改文档名称为“mymap.html”时,注意要将文件的扩展名一起修改。如何修改文件的扩展名,请自行查阅相关资料,例如通过“百度”进行搜索。

测试密钥:5c4b6cfcdf62237013fe7c34ddb9d80c。此密钥由作者本人申请,无使用限制,但不保证长期有效。建议读者自行注册百度开发者账号,申请密钥。


~~~~~~~~~~~~ 正文结束 下面没了 ~~~~~~~~~~~~

小楼老师再出新作,倾力打造Axure RP 8精品课程系列,以最短的时间高效完成学习目标,入门进阶与实战案例并重,是0基础的新手从入门到精通的必备课程。

《AxureRP 8 入门与实战 - 入门篇》------从零入门进阶的最佳课程------【点此查看详情】

《AxureRP 8 入门与实战 - 案例篇》------实战手册图书的同步视频------【点此查看详情】


转载请注明:Axure原创教程网 » AxureRP8实战手册-案例10(内联框架:嵌入百度地图)

喜欢 (31)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(31)个小伙伴在吐槽
  1. mac上我用word生成html后,测试失败了,求教 🙁
    ddddaisy2016-06-15 15:00 回复
    • 应该是密钥失效了
      小C2016-06-15 17:51 回复
  2. 小楼老师,我在mac上用的axure。发现好多之前在Windows上已经实现的效果,比如排序,在mac上单击没效果了。而且那个下拉列表并没有圆角,在mac装的浏览器火狐谷歌遨游QQ挨个儿试了,都有圆角,又不能改。发给别人在Windows上展示就正常。我该咋办啊,难道要装个Windows系统么
    大嘴羊2016-06-15 15:25 回复
  3. 高德地图的不行吗?预览页面显示“file not found”
    chucka2016-07-15 16:59 回复
    • 我也是无法显示,按照步骤做的,密匙也加上去了,我想做的是在手机上显示地图的效果,但是地图的尺寸大小也改了但是好像没有用。。。。
      23333Axure做不出来2016-09-05 14:19 回复
  4. 请问生成文件后地图下方“查看完整地图”的背景色一直为白色是怎么回事呀
    藤悬木2016-07-22 13:55 回复
  5. 获得AK之后 再怎么操作啊楼大
    May2016-08-04 15:08 回复
  6. 做不出来,我已经申请了密钥。还是无法显示地图
    青城2016-08-26 16:04 回复
    • 我也是
      23333Axure做不出来2016-09-05 14:13 回复
    • 同样无法显示地图
      ECHO2016-09-06 16:00 回复
  7. 自己申请了ak,无法显示,mac上的链接地址是否需要写 /usr/用户这样的地址
    极限开水2016-09-28 14:09 回复
    • 已解决,这个文件要发布成html(此时是一个文件夹)而非rp格式,同时把mymap.html放在刚刚发布的文档文件夹里面,可以打开地图 😳
      极限开水2016-09-28 14:50 回复
      • 小楼老师 为什么我怎么弄做出来都无法显示,苦恼~~
        邓邓2017-10-24 11:44 回复
  8. 谢谢小楼老师分享!想请教下:父框架的概念,与父窗口的区别;因为当学习父框架打开链接的时候,发现是在当前窗口打开链接,很疑惑。期待小楼老师回复,谢谢。
    c_cx2016-10-10 11:23 回复
    • 小楼一夜听春语
      就是当前框架的外层框架
      小楼一夜听春语2016-10-10 14:43 回复
  9. Axure8.0里面预览的时候,页面显示 : File Not Found url : /13.26.36/mymap.html 而且,这个url前面的数字部份,每次浏览的时候都会不一样!这个mymap.html的地址该怎么写呢?!这个mymap.html文件已经放在生成的文件夹下了,单独显示是可以的。
    流水晓风2016-10-11 13:41 回复
    • 小楼一夜听春语
      生成的文件需要本地打开查看,而非预览。第5步,看仔细!
      小楼一夜听春语2016-10-11 13:46 回复
      • 那这样的话这个生成的地图和Axure有什么关系呢?
        北纬已北2016-10-31 15:22 回复
      • 同样的问题,是的,在本地就可以看到啦~ 🙂 谢谢老师~
        2017-06-29 00:45 回复
  10. 老师,为什么生成后显示的框内为复制的代码呢?地图没有显示
    xiao2016-12-29 09:17 回复
    • 小楼一夜听春语
      地图文件格式错误不是html
      小楼一夜听春语2016-12-29 19:25 回复
  11. 小楼老师,为什么发布的页面上面,下面的“查看完整地图”会向左偏移了,与地图没有照齐,而在原型制作页面两者是排列整齐的?
    张家小绿豆2017-05-25 17:00 回复
    • 我也发现这个问题了。。。你解决了吗
      星缘2017-06-06 22:21 回复
      • 试了两天,还是没解决,求高人指点
        张家小绿豆2017-06-07 09:18 回复
  12. 做好之后,我自己查看没问题,发给别人,别人看不到地图,怎么破
    permanentivy2017-06-27 14:55 回复
    • 小楼一夜听春语
      你有把地图文件放HTML文件夹中发给别人吗?
      小楼一夜听春语2017-06-27 22:24 回复
      • 有的
        permanentivy2017-06-27 22:37 回复
  13. 百度开发者中心-地图与位置信息-百度地图开放平台-门户-开发-地图生成器
    y2017-07-07 15:22 回复
  14. 全按步骤做了,用百度开发工具生成的HTML文件中可以查看百度地图,可是再次通过原型预览时却提示找不到文件。是什么原因
    光头强的大老婆2017-07-28 17:01 回复
  15. 小楼老师 为什么我怎么弄做出来都无法显示,苦恼~~
    邓邓2017-10-24 11:45 回复
  16. 显示出来了,但是怎么调整地图的长宽呢?改了好几次了,是在代码里改么
    奶油王2017-12-11 12:14 (2天前)回复