1. 文章引言
今天在學(xué)習(xí)amis框架中的地理位置(LocationPicker)的組件，如下圖所示：
關(guān)于amis的更多了解，可以參考博文：百度低代碼amis框架的講解
截圖中注意的是，ak參數(shù)只能在amis官網(wǎng)示例中使用，讓我們前往百度地圖開放平臺申請自己的 ak。
百度地圖開放平臺官網(wǎng)地址：https://lbsyun.baidu.com
百度地圖也會開放一些免費的Api，來提供一些基本的地圖服務(wù)。
于是點擊鏈接，前往百度地圖開放平臺，申請自己的ak。
說到現(xiàn)在，AK有什么用？AK即access key，就相當(dāng)于我們百度地圖的身份標(biāo)識，也會跟實名信息綁在一起，只能用于正常開發(fā)（不能非法使用）。
我們有了AK后就可以參考開發(fā)文檔中來調(diào)用百度地圖了，也可以用于Vue-baidu-map后面文章會講。
2. 申請AK
- 訪問百度地圖開放平臺，如果你還未登錄，則映入眼簾的就是登錄，如下圖所示：
- 登錄成功后，點擊首頁中的控制臺，如下圖所示：
- 點擊控制臺中的應(yīng)用管理，找到我的應(yīng)用，點擊創(chuàng)建應(yīng)用。
如果你還沒有實名認(rèn)證，需要完成實名認(rèn)證后，方可創(chuàng)建應(yīng)用，如下圖所示：
因為只有創(chuàng)建應(yīng)用，才能獲取到ak。
- 選擇實名認(rèn)證的類型，因為我是個人，故選擇
我是個人愛好者/學(xué)生，如下圖所示：
- 按照步驟填寫完個人信息后，即可完成實名認(rèn)證，我們便可以創(chuàng)建應(yīng)用，如下圖所示：
如實填寫相關(guān)信息后，一般都會通過審核。
-
應(yīng)用名稱：取個相關(guān)的項目名
-
應(yīng)用類型：選擇瀏覽器端
-
白名單：填個
*就可以
- 創(chuàng)建成功后，在我的應(yīng)用中，就可以看到
ak了，如下圖所示：
3. 使用AK
我們再次打開百度地圖開放平臺，點擊開發(fā)文檔，你會看到如下開發(fā)文檔：
-
Web開發(fā) -
Android開發(fā) -
iOS開發(fā) -
HarmonyOS開發(fā) -
…
因為我是web開發(fā)，選擇JavaScript API，如下圖所示：
點擊開發(fā)指南，找到入門指南，點擊Hello World，即可看到示例，如下圖所示：
當(dāng)然，你可以點擊DEMO詳情，查看完整的DEMO信息，如下圖所示：
復(fù)制DEMO詳情中的源碼，到我們的html頁面中，注意源碼中的這條語句：
<script
type="text/javascript"
src="http://api.map.baidu.com/api?type=webgl&v=1.0&ak=您的密鑰"></script>
將這條語句修改如下代碼：
<script
type="text/javascript"
src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=您的密鑰"></script>
完整的示例代碼如下所示：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微軟雅黑";}
</style>
<script type="text/javascript" src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=您的密鑰"></script>
<title>地圖展示</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
// GL版命名空間為BMapGL
// 按住鼠標(biāo)右鍵，修改傾斜角和角度
var map = new BMapGL.Map("allmap"); // 創(chuàng)建Map實例
map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11); // 初始化地圖,設(shè)置中心點坐標(biāo)和地圖級別
map.enableScrollWheelZoom(true); //開啟鼠標(biāo)滾輪縮放
</script>
4. 解決BMapGL is not defined的錯誤
如果你直接復(fù)制DEMO源碼，而不修改上述這條語句：
<script
type="text/javascript"
src="http://api.map.baidu.com/api?type=webgl&v=1.0&ak=您的密鑰"></script>
能回報出如下錯誤，我們只要在//api前，加上https，即https://api.map.baidu.com/api?type=webgl&v=1.0&ak=您的密鑰即可。
5. 文末總結(jié)
經(jīng)過我的分析，相信你對申請百度地圖開發(fā)者AK和基本使用，有了初步的了解。
但在實際開發(fā)中，遇到的情況可能不一樣。文章來源：http://www.zghlxwxcb.cn/news/detail-789796.html
比如，你可能是將百度地圖嵌入到Android或iOS的App中，那么，你就要看開發(fā)文檔中的Android開發(fā)或者iOS開發(fā)的相關(guān)文檔了。文章來源地址http://www.zghlxwxcb.cn/news/detail-789796.html
到了這里，關(guān)于如何申請百度地圖開發(fā)者AK和基本使用，并解決Uncaught ReferenceError: BMapGL is not defined的錯誤的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
