AxureRP8实战手册-案例10（内联框架：嵌入百度地图）

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

案例来源:

百度糯米-商品详情

案例效果：

• 页面打开时：（图1-59）

案例描述：

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

元件准备：

• 页面中：（图1-60）

操作步骤：

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

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

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

• 设置地图中心点，此处以“国贸”为例；（图1-63）

• 设置地图尺寸、显示的内容以及其他功能；（图1-64）

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

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

• 将文档保存，然后将文档名称修改为“mymap.html”。（图1-67）

4、将制作好的原型生成HTML文件，将“mymap.html”文件添加到生成的HTML文件夹中；（图1-68）

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

补充说明：

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

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