百度地圖API支持HTTPS

這里我用的是百度地圖API3.0

結合我的實際項目和查到的一些博文進行一個總結。

項目需求：最近公司地圖項目中需要把http協議改為https協議，接口改為https之后，請求接口都可以走通，但是百度地圖不能正常顯示了，以下是解決方案。

借鑒 https://juejin.cn/post/6844903566709260296#comment 博客。

頁面初始引用

http://api.map.baidu.com/getscript?v=3.0&ak=秘鑰&services=&t=時間

 修改為

//api.map.baidu.com/getscript?v=3.0&ak=秘鑰&services=&t=時間

會報以下提示

 

 

 

 

 

 發現百度地圖協議的區分是由‘window.HOST_TYPE’控制的，但是並未看到其對應的賦值，所以頁面使用的是缺省值‘0’，即走http協議。

發現之前解決方案出現過  添加‘&s=1’參數，但是也沒有生效。

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

借鑒前輩的求證方案：對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";

最終實現方案：

    //采用引入百度Map3.0版本
    loadMapScript() {
      //讓百度地圖支持https請求
      const protocolStr = document.location.protocol // 返回當前瀏覽器 URL 的協議
      switch (protocolStr) {
        case 'https:':
          // 指定https訪問類型，具體見百度地圖API加載方式：http://www.jiazhengblog.com/blog/2011/06/28/284/
          window.HOST_TYPE = '2'
          break
        default:
          break
      }
      var script = document.createElement("script");
      script.type = "text/javascript";
      script.src =
        "//api.map.baidu.com/getscript?v=3.0&ak=密鑰&services=&t=時間";
      script.onload = () => {
        this.loadInfoBoxScript();
      };
      document.body.appendChild(script);
    },