案例7：使用內聯框架加載可交互的百度地圖
第一步：申請百度地圖API秘鑰。
打開網址：http://developer.baidu.com/map/，注冊賬戶并登錄。
申請Web服務API：http://developer.baidu.com/map/index.php?title=webapi，然后按照提示創(chuàng)建應用，復制API Key，見圖105。
（圖105）
第二步：生成百度地圖HTML代碼。
打開Javascript API大眾版網址：http://developer.baidu.com/map/index.php?title=jspopular，在功能介紹中單擊地圖展示，見圖106，然后在新打開的網頁中輸入剛剛復制的API Key，見圖107-A。
（圖106）
（圖107）
復制圖107-B中的所有源代碼，并將其另存為map.html文件到電腦桌面上，見圖108。
（圖108）
第三步：回到Axure工作界面，在【部件】面板中拖放一個【內聯框架】部件到設計區(qū)域，右鍵單擊該部件隱藏邊框，將【滾動條】設置為【從不顯示滾動條】，雙擊內聯框架部件，在彈出的【鏈接屬性】對話框中選擇【鏈接到url或文件】，并輸入map.html的絕對路徑，見圖109，單擊【確定】按鈕關閉【鏈接屬性】對話框。
（圖109）
第四步：單擊工具欄中的【預覽】按鈕，此時瀏覽器中的內聯框架部件會提示如下錯誤，見圖110。
（圖110）
在這里網站建設小編需要提醒注意的是，在使用內聯框架部件嵌入外部HTML文件時要生成HTML才能正常預覽效果，單擊工具欄中的【發(fā)布】按鈕，然后選擇【生成HTML文件】，見圖111。
（圖111）
此時，我們就可以對瀏覽器中的百度地圖進行拖動、縮放等可交互操作了，見圖112。
但是，當我們把生成的HTML文件夾上傳到Web服務器演示時，仍然會出現問題，因為map.html文件在桌面上，而且【內聯框架】中的文件路徑指向桌面上的map.html。要解決這個問題，只需將 map.html文件移動到生成的HTML文件夾中，見圖113。
（圖112）
（圖113）
然后重新設置【內聯框架】部件中map.html文件路徑（因為map.html被移動到了生成HTML文件夾的根目錄），見圖114。再次點擊工具欄中的【發(fā)布＞生成HTML文件】，此時將生成的THML文件夾上傳至Web服務器也可以正常操作了。至此，使用內聯框架加載可交互的百度地圖案例就結束了。
（圖114）
當前文章標題：案例7：使用內聯框架加載可交互的百度地圖
當前URL：http://www.gtalker.cn/news/wzzz/3387.html
