JS`HTML_百度地图JS-API的HTTPS修正

让你的百度地图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服务，请先检查您的版本。

配置

1. 如果使用JavaScript API ，需要加一个特殊字段 (s=1)：
   https://api.map.baidu.com/api?v=2.0&ak=你的密钥&s=1；
2. 对于Web API 无需加特殊字段，直接使用 HTTPS协议访问即可，如Geocoding：
   https://api.map.baidu.com/geocoder/v2/?ak=你的秘钥&callback=renderReverse&location=39.983424,116.322987&output=xml&pois=1
3. 如果对数据安全要求高，建议使用 POST请求，避免把请求参数放到 URI中敏感信息被泄露；

最终解决

(Copyright © http://blog.youkuaiyun.com/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.youkuaiyun.com/weixin_38023551/article/details/76152743

[2] https://blog.youkuaiyun.com/qq_28018283/article/details/52160197

(Copyright © http://blog.youkuaiyun.com/s_gy_zetrov. All Rights Reserved)

---

visitor tracker

---