在 HTTPS 項目中使用百度地圖 API

百度地圖 API 產品簡介

百度地圖 JavaScript API 是一套由 JavaScript 語言編寫的應用程序接口，可幫助您在網站中構建功能豐富、交互性強的地圖應用，支持 PC 端和移動端基於瀏覽器的地圖應用開發，且支持 HTML5 特性的地圖開發。 百度地圖 JavaScript API 支持 HTTP 和 HTTPS，免費對外開放，可直接使用。接口使用無次數限制。在使用前，您需先申請密鑰（ak）纔可以使用。

基礎使用

引用百度地圖 API, 將 "您的密匙" 替換爲你在百度地圖申請的 AK, 便可使用。

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

更多問題

問題1. https項目

在 https 項目中經過http導入會出現如下問題：

那麼百度地圖的 JavaScript API 是否支持 HTTPS 請求呢?

答案是固然支持。

JavaScript API V2.0 及以上版本支持 HTTPS。 若是想使用 HTTPS 協議調用 JavaScript API，直接將腳本引用的協議修改成 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>
複製代碼

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

能夠看到添加 &s=1 後所獲得的結果與沒添加時是 一致的。

問題2. 瀏覽器警告

在部分瀏覽器（如谷歌）中會產生警告以下：

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.
複製代碼

這段警告的大概意思是說一個阻塞性的解析器，跨站點的腳本，經過document.write調用。此腳本的網絡請求可能因爲網絡鏈接不良而被瀏覽器在此頁面加載或未來的頁面加載中阻止。若是在此頁面加載中被阻止，將在隨後的控制檯消息中確認。更多詳情參見

那麼咱們來分析一下百度地圖API導入獲得的JavaScript的代碼

(function() {
    window.BMAP_PROTOCOL = "https"; // https導入會有此行代碼
    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 引起的警告。那麼咱們經過 <script type="text/javascript" src="https://api.map.baidu.com/getscript?v=3.0&ak='您的密鑰'&services=&t=20190301102433"> </script> 導入百度地圖的API就能夠避免此警告。不過這樣導入缺失的另外兩行window.BMAP_PROTOCOL = "https"與window.BMap_loadScriptTime = (new Date).getTime() 要記得添加上，避免產生其餘問題。