让百度地图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=时间
复制代码

转载于:https://juejin.im/post/5a9259ef5188251c85637e25