详解在HTTPS 项目中使用百度地图 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导入会出现以下问题:那么百度地图的 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
才可以。
不知道是不是官方进行过优化,下面两张图是今日实测的结果:可以看到添加
&s=1
后所得到的结果与没添加时是__一致的__。
问题2. 浏览器警告
在部分浏览器(如谷歌)中会产生警告如下:上一篇:js比较两个单独的数组或对象是否相等的实例代码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详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
下一篇:vue操作动画的记录animate.css实例代码