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

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

 AxureRP8.0教程  小楼一夜听春语  4年前 (2016-06-14)  32244℃  0评论

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

案例来源:

百度糯米-商品详情

案例效果:

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

1_59

案例描述:

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

元件准备:

  • 页面中:(图1-60)

1_60

操作步骤:

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

1_61

2、打开百度地图开放平台进行地图生成,http://api.map.baidu.com/lbsapi/creatmap/【地图生成器】;(图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原创教程网 » AxureRP8实战手册-案例10(内联框架:嵌入百度地图)

猜你喜欢

转载自www.cnblogs.com/sikongluoxing/p/12761920.html