讓百度地圖API支持HTTPS

近期給舊項目作協議升級，恰好碰到引用的百度地圖API的坑，踩完坑記一記，或許也能幫到其餘小夥伴呢，哈哈哈~

站點協議升級

頁面引用由

http://api.map.baidu.com/getscript?v=2.0&ak=祕鑰&services=&t=時間
複製代碼

修改爲：

//api.map.baidu.com/getscript?v=2.0&ak=祕鑰&services=&t=時間
複製代碼

會報如下安全提示：

審查腳本

協議的區分是由‘window.HOST_TYPE’控制的，可是並未看到其對應的賦值，因此頁面使用的是缺省值‘0’，即走http協議。

借鑑前輩總結

一、搜索了許多相關關鍵詞找到的解決方法大體都是添加‘&s=1’參數，可是也沒有生效，也貼一下這個：

https://api.map.baidu.com/api?v=2.0&ak=你的密鑰&s=1
複製代碼

二、參考百度地圖API加載方式： www.jiazhengblog.com/blog/2011/0…

求證

對https的返回和http請求該文件的返回對比： http請求：

(function(){ window.BMap_loadScriptTime = (new Date).getTime(); document.write('<script type="text/javascript" src="http://api.map.baidu.com/getscript?v=2.0&ak=你的密鑰&services=&t=20180201111639"></script>');})();
複製代碼

https請求：

(function(){window.HOST_TYPE = "2"; window.BMap_loadScriptTime = (new Date).getTime(); document.write('<script type="text/javascript" src="https://api.map.baidu.com/getscript?v=2.0&ak=你的密鑰&services=&t=20180201111639"></script>');})();
複製代碼

發現走https請求的多了一個賦值：

window.HOST_TYPE = "2";
複製代碼

得出結論

因而就直接暴力作了一個協議區分賦值

const protocolStr = document.location.protocol
switch (protocolStr) {
  case 'https:':
    // 指定https訪問類型，具體見百度地圖API加載方式：http://www.jiazhengblog.com/blog/2011/06/28/284/
    window.HOST_TYPE = '2'
    break
  default:
    break
}
複製代碼

再引用:

//api.map.baidu.com/getscript?v=2.0&ak=祕鑰&services=&t=時間
複製代碼