百度地图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);
    },