快捷導(dǎo)航

詳解在HTTPS 項(xiàng)目中使用百度地圖 API

更新時(shí)間：2019年04月26日 15:22:57 作者：_陳平安

這篇文章主要介紹了在HTTPS 項(xiàng)目中使用百度地圖 API，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

百度地圖 API 產(chǎn)品簡(jiǎn)介

百度地圖 JavaScript API 是一套由 JavaScript 語(yǔ)言編寫(xiě)的應(yīng)用程序接口，可幫助您在網(wǎng)站中構(gòu)建功能豐富、交互性強(qiáng)的地圖應(yīng)用，支持 PC 端和移動(dòng)端基于瀏覽器的地圖應(yīng)用開(kāi)發(fā)，且支持 HTML5 特性的地圖開(kāi)發(fā)。
百度地圖 JavaScript API 支持 HTTP 和 HTTPS，免費(fèi)對(duì)外開(kāi)放，可直接使用。接口使用無(wú)次數(shù)限制。在使用前，您需先申請(qǐng)密鑰（ak）才可使用。

基礎(chǔ)使用

引用百度地圖 API, 將 “您的密匙” 替換為你在百度地圖申請(qǐng)的 AK, 即可使用。

<script
 type="text/javascript"
 src="http://api.map.baidu.com/api?v=3.0&ak=您的密鑰"
></script>

更多問(wèn)題

問(wèn)題1. https項(xiàng)目
在 https 項(xiàng)目中通過(guò)http導(dǎo)入會(huì)出現(xiàn)以下問(wèn)題：

那么百度地圖的 JavaScript API 是否支持 HTTPS 請(qǐng)求呢?
答案是當(dāng)然的。

JavaScript API V2.0 及以上版本支持 HTTPS。
如果想使用 HTTPS 協(xié)議調(diào)用 JavaScript API，直接將腳本引用的協(xié)議修改為 HTTPS 即可。

<script
 type="text/javascript"
 src="https://api.map.baidu.com/api?v=2.0&ak=您的密鑰"
></script>
<script
 type="text/javascript"
 src="https://api.map.baidu.com/api?v=3.0&ak=您的密鑰"
></script>

以上是官方文檔介紹的用法，在用搜索引擎查找問(wèn)題解決方案時(shí)，看到前輩們的技術(shù)博客都說(shuō)使用 <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=您的密鑰"></script> 不能達(dá)到預(yù)期效果，必須添加參數(shù) &s=1 才可以。
不知道是不是官方進(jìn)行過(guò)優(yōu)化，下面兩張圖是今日實(shí)測(cè)的結(jié)果：

可以看到添加 &s=1 后所得到的結(jié)果與沒(méi)添加時(shí)是__一致的__。
問(wèn)題2. 瀏覽器警告
在部分瀏覽器（如谷歌）中會(huì)產(chǎn)生警告如下：

 A parser-blocking, cross site (i.e. different eTLD+1) script, 
 https://api.map.baidu.com/getscript?v=3.0&ak='您的密鑰'&services=&t=20190301102433,
 is invoked via document.write. 
 The network request for this script MAY be blocked by the browser in this or 
 a future page load due to poor network connectivity. 
 If blocked in this page load, it will be confirmed in a subsequent console message. 
 See https://www.chromestatus.com/feature/5718547946799104 for more details.

這段警告的大概意思是說(shuō)一個(gè)阻塞性的解析器，跨站點(diǎn)的腳本，通過(guò)document.write調(diào)用。此腳本的網(wǎng)絡(luò)請(qǐng)求可能由于網(wǎng)絡(luò)連接不良而被瀏覽器在此頁(yè)面加載或?qū)?lái)的頁(yè)面加載中阻止。如果在此頁(yè)面加載中被阻止，將在隨后的控制臺(tái)消息中確認(rèn)。更多詳情參見(jiàn)

那么我們來(lái)分析一下百度地圖API導(dǎo)入得到的JavaScript的代碼

 (function() {
  window.BMAP_PROTOCOL = "https"; // https導(dǎo)入會(huì)有此行代碼
  window.BMap_loadScriptTime = new Date().getTime();
  document.write(
  `<script 
    type="text/javascript" 
    src="https://api.map.baidu.com/getscript?v=3.0&ak='您的密鑰'&services=&t=20190301102433"
   > </script>`
  );
 })();

可以得知正是這段代碼中的 document.write 引發(fā)的警告。那么我們?cè)贖TML文件中直接使用 <script type="text/javascript" src="https://api.map.baidu.com/getscript?v=3.0&ak='您的密鑰'&services=&t=20190301102433"> </script> 導(dǎo)入百度地圖的API就可以避免此警告。不過(guò)這樣導(dǎo)入時(shí)，缺失的另外兩行 window.BMAP_PROTOCOL = "https" 與 window.BMap_loadScriptTime = (new Date).getTime() 一定要記得添加到項(xiàng)目中，避免產(chǎn)生其他問(wèn)題。

以上所述是小編給大家介紹的在HTTPS 項(xiàng)目中使用百度地圖 API詳解整合，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: