站长资源网络编程

详解在HTTPS 项目中使用百度地图 API

整理:jimmy2026/7/30浏览2
简介百度地图 API 产品简介百度地图 JavaScript API 是一套由 JavaScript 语言编写的应用程序接口,可帮助您在网站中构建功能丰富、交互性强的地图应用,支持 PC 端和移动端基于浏览器的地图应用开发,且支持 HTML5 特性的地图开发。百度地图 JavaScript API

百度地图 API 产品简介

百度地图 JavaScript API 是一套由 JavaScript 语言编写的应用程序接口,可帮助您在网站中构建功能丰富、交互性强的地图应用,支持 PC 端和移动端基于浏览器的地图应用开发,且支持 HTML5 特性的地图开发。
百度地图 JavaScript API 支持 HTTP 和 HTTPS,免费对外开放,可直接使用。接口使用无次数限制。在使用前,您需先申请密钥(ak)才可使用。

基础使用

引用百度地图 API, 将 “您的密匙” 替换为你在百度地图申请的 AK, 即可使用。

<script
 type="text/javascript"
 src="/UploadFiles/2021-04-02/api">

更多问题

问题1. https项目
在 https 项目中通过http导入会出现以下问题:

详解在HTTPS 项目中使用百度地图 API

那么百度地图的 JavaScript API 是否支持 HTTPS 请求呢"htmlcode">

<script
 type="text/javascript"
 src="/UploadFiles/2021-04-02/api">

以上是官方文档介绍的用法,在用搜索引擎查找问题解决方案时,看到前辈们的技术博客都说使用 <script type="text/javascript" src="/UploadFiles/2021-04-02/api"> 不能达到预期效果,必须添加参数 &s=1 才可以。
不知道是不是官方进行过优化,下面两张图是今日实测的结果:

详解在HTTPS 项目中使用百度地图 API

详解在HTTPS 项目中使用百度地图 API

可以看到添加 &s=1 后所得到的结果与没添加时是__一致的__。
问题2. 浏览器警告
在部分浏览器(如谷歌)中会产生警告如下:

详解在HTTPS 项目中使用百度地图 API

 A parser-blocking, cross site (i.e. different eTLD+1) script, 
 https://api.map.baidu.com/getscript"nofollow" href="https://www.chromestatus.com/feature/5718547946799104">更多详情参见

那么我们来分析一下百度地图API导入得到的JavaScript的代码

 (function() {
  window.BMAP_PROTOCOL = "https"; // https导入会有此行代码
  window.BMap_loadScriptTime = new Date().getTime();
  document.write(
  `<script 
    type="text/javascript" 
    src="/UploadFiles/2021-04-02/getscript">

可以得知正是这段代码中的 document.write 引发的警告。那么我们在HTML文件中直接使用 <script type="text/javascript" src="/UploadFiles/2021-04-02/getscript"> 导入百度地图的API就可以避免此警告。不过这样导入时,缺失的另外两行 window.BMAP_PROTOCOL = "https"window.BMap_loadScriptTime = (new Date).getTime() 一定要记得添加到项目中,避免产生其他问题。

以上所述是小编给大家介绍的在HTTPS 项目中使用百度地图 API详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!