版权声明:本文为博主原创文章,未经博主允许不得转载。(Copyright © https://blog.csdn.net/s_gy_zetrov. All Rights Reserved) https://blog.csdn.net/S_gy_Zetrov/article/details/82748800
让你的百度地图JS API
支持HTTPS
某天发现站点从http更新为https后页面中百度地图所在的区域就一片空白了。。
Safari 报错信息:
[blocked] The page at https://xxx.html was not allowed to run insecure content from http://api.map.baidu.com/api?v=1.5&ak=xxxxxx.
xxxx.html:246 Uncaught ReferenceError: BMap is not defined.
最开始,我以为只要把http改成https就行了,可还是太天真。
虽然改成https后地图能加载出来了,可缩放、小红点、我自己用JS编写的路线图,统统都还是需要http,所以还需要继续修改。
此步Chrome报错及警告(较Safari更加精确):
Mixed Content: The page at 'https://xxxx.html' was loaded over HTTPS, but requested an insecure script 'http://api.map.baidu.com/getmodules?v=1.5&mod=map,scommon,mapclick,oppc,tile,marker,common,infowindow,draw,drawbysvg,poly'. This request has been blocked; the content must be served over HTTPS.
说明JS-API内部链接请求的字符串依旧是http而不是https,所以冲突了,效果不行。
于是查阅资料,发现:
注意:仅JavaScript API V2.0 版本支持https,其他JavaScript API版本均不支持。使用https服务,请先检查您的版本。
配置
- 如果使用JavaScript API ,需要加一个特殊字段 (s=1):
https://api.map.baidu.com/api?v=2.0&ak=你的密钥&s=1;- 对于Web API 无需加特殊字段,直接使用 HTTPS协议访问即可,如Geocoding:
https://api.map.baidu.com/geocoder/v2/?ak=你的秘钥&callback=renderReverse&location=39.983424,116.322987&output=xml&pois=1- 如果对数据安全要求高,建议使用 POST请求,避免把请求参数放到 URI中敏感信息被泄露;
最终解决
(Copyright © http://blog.csdn.net/s_gy_zetrov. All Rights Reserved)
将http://api.map.baidu.com/api?v=1.5&ak=你的秘钥
改为https://api.map.baidu.com/api?v=2.0&ak=你的秘钥&s=1
改动3处:
- http -> https
- v=1.5 -> v=2.0
- ak=你的秘钥 -> ak=你的秘钥&s=1
重新上线后,百度地图恢复正常!
peace out : )
References
[1] https://blog.csdn.net/weixin_38023551/article/details/76152743
[2] https://blog.csdn.net/qq_28018283/article/details/52160197
(Copyright © http://blog.csdn.net/s_gy_zetrov. All Rights Reserved)
visitor tracker