如何在前端網頁中調用第三方地圖API？

這里以調用高德地圖和百度地圖為例，簡單介紹一下前端網頁中如何調用第三方地圖API，主要內容如下：

1.首先，需要注冊高德地圖開發者，這個是使用API的前提，只有正常登陸，創建應用，生成專屬的Key值，才能正常調用地圖，注冊的話，直接到官網上注冊就行，需要輸入以下信息，按照提示一步一步往下走就行，如下：

2.注冊成功后，登陸平臺，點擊右上角的“控制臺”，進入用戶管理界面，依次點擊“應用管理”->“我的應用”，就會跳轉到應用管理界面，點擊右上角的“創建應用”，彈出對話框，輸入應用名稱和類型，如下：

3.創建成功后，在當前的應該管理頁面就可以看到剛才創建的應用，接著就是為應用添加key值，這個直接點擊應用右邊的“+”號就行，如下，我們是網頁中引入，所以選擇“Web端（JS API）”，通過JS引入前端網頁：

key值添加成功后，就會在當前應用下列出來，如下，這里需要記住這個字符串，后面的代碼中要用到：

4.最后就是編寫前端測試代碼了，基本思路先創建一個div容器，然后通過JS API引入地圖到這個容器中就行，如下，非常簡單，key參數傳入上面的字符串就行：

用瀏覽器打開這個html文件，效果如下，已經成功引入高德地圖：

1.首先，也是注冊百度地圖開發者，這個直接到官網上注冊就行，或者直接使用百度賬號登陸，點擊右上角的“控制臺”，進入用戶界面，接著點擊“創建應用”按鈕，彈出如下界面，輸入應用名稱，因為是前端網頁引入，所以這里我們選擇“瀏覽器端”：

2.應用創建成功后，就會為當前的應用生成一個AK值，后面的代碼中就是通過這個值引入百度地圖，如下，需要記住這個字符串：

3.最后就是編寫前端測試代碼了，如下，基本步驟和高德地圖差不多，先創建一個div容器，然后通過JS API引入地圖到這個容器，最后就可以正常顯示，這里替換成自己應用的AK值：

用瀏覽器打開這個html文件，效果如下，已經成功引導百度地圖：

至此，我們就完成了在前端網頁中調用高德地圖API和百度地圖API。總的來說，整個過程非常簡單，步驟也很清晰，只要你熟悉一下上面的過程，很快就能掌握的，官網也給出了非常詳細的開發文檔，非常適合初學者學習，還可以在線編輯查看效果，感興趣的話，可以搜一下，希望以上分享的內容能對你有所幫助吧，也歡迎大家評論、留言。