讓百度地圖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協議。

借鑑前輩總結

1、搜尋了許多相關關鍵詞找到的解決方法大致都是新增‘&s=1’引數，但是也沒有生效，也貼一下這個：

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

2、參考百度地圖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=時間
複製程式碼