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

百度地图 API 产品简介

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

基础使用

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

<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=您的密钥" ></script>
复制代码

更多问题

问题1. https项目

在 https 项目中经过http导入会出现如下问题：

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

答案是固然支持。

JavaScript API V2.0 及以上版本支持 HTTPS。 若是想使用 HTTPS 协议调用 JavaScript API，直接将脚本引用的协议修改成 HTTPS 便可。

<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=您的密钥" ></script>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=您的密钥" ></script>
复制代码

以上是官方文档介绍的用法，在用搜索引擎查找问题解决方案时，看到前辈们的技术博客都说使用 <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=您的密钥"></script> 不能达到预期效果，必须添加参数 &s=1 才能够。 不知道是否是官方进行过优化，下面两张图是今日实测的结果：

能够看到添加 &s=1 后所获得的结果与没添加时是 一致的。

问题2. 浏览器警告

在部分浏览器（如谷歌）中会产生警告以下：

A parser-blocking, cross site (i.e. different eTLD+1) script, 
  https://api.map.baidu.com/getscript?v=3.0&ak='您的密钥'&services=&t=20190301102433,
  is invoked via document.write. 
  The network request for this script MAY be blocked by the browser in this or 
  a future page load due to poor network connectivity. 
  If blocked in this page load, it will be confirmed in a subsequent console message. 
  See https://www.chromestatus.com/feature/5718547946799104 for more details.
复制代码

这段警告的大概意思是说一个阻塞性的解析器，跨站点的脚本，经过document.write调用。此脚本的网络请求可能因为网络链接不良而被浏览器在此页面加载或未来的页面加载中阻止。若是在此页面加载中被阻止，将在随后的控制台消息中确认。更多详情参见

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

(function() {
    window.BMAP_PROTOCOL = "https"; // https导入会有此行代码
    window.BMap_loadScriptTime = new Date().getTime();
    document.write(
    `<script type="text/javascript" src="https://api.map.baidu.com/getscript?v=3.0&ak='您的密钥'&services=&t=20190301102433" > </script>`
    );
  })();
复制代码

能够得知正是这段代码中的 document.write 引起的警告。那么咱们经过 <script type="text/javascript" src="https://api.map.baidu.com/getscript?v=3.0&ak='您的密钥'&services=&t=20190301102433"> </script> 导入百度地图的API就能够避免此警告。不过这样导入缺失的另外两行window.BMAP_PROTOCOL = "https"与window.BMap_loadScriptTime = (new Date).getTime() 要记得添加上，避免产生其余问题。