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


Posted in Javascript onApril 26, 2019

百度地图 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导入会出现以下问题:

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

那么百度地图的 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 才可以。
不知道是不是官方进行过优化,下面两张图是今日实测的结果:

详解在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?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 引发的警告。那么我们在HTML文件中直接使用 <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() 一定要记得添加到项目中,避免产生其他问题。

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

Javascript 相关文章推荐
js宝典学习笔记(上)
Jan 10 Javascript
学习ExtJS table布局
Oct 08 Javascript
jQuery Ajax使用 全解析
Dec 15 Javascript
Node.js开发之访问Redis数据库教程
Jan 14 Javascript
js实现精美的图片跟随鼠标效果实例
May 16 Javascript
jQuery自定义动画函数实例详解(附demo源码)
Dec 10 Javascript
AngularJS模态框模板ngDialog的使用详解
May 11 Javascript
Vue 获取数组键名的方法
Jun 21 Javascript
webpack+vue-cli项目中引入外部非模块格式js的方法
Sep 28 Javascript
微信小程序封装自定义弹窗的实现代码
May 08 Javascript
JS字符串和数组如何实现相互转化
Jul 02 Javascript
JS获取一个字符串中指定字符串第n次出现的位置
Feb 10 Javascript
vue操作动画的记录animate.css实例代码
Apr 26 #Javascript
JS原生瀑布流效果实现
Apr 26 #Javascript
Vue基于vuex、axios拦截器实现loading效果及axios的安装配置
Apr 26 #Javascript
详解auto-vue-file:一个自动创建vue组件的包
Apr 26 #Javascript
vue组件间的参数传递实例详解
Apr 26 #Javascript
详解VUE前端按钮权限控制
Apr 26 #Javascript
微信小程序开发之点击按钮退出小程序的实现方法
Apr 26 #Javascript
You might like
PHP中获取变量的变量名的一段代码的bug分析
2011/07/07 PHP
PHP读取文件并可支持远程文件的代码分享
2012/10/03 PHP
Laravel模型间关系设置分表的方法示例
2018/04/21 PHP
在 IE 中调用 javascript 打开 Excel 表
2006/12/21 Javascript
javascript Array.prototype.slice使用说明
2010/10/11 Javascript
理解JavaScript中的对象 推荐
2011/01/09 Javascript
js实现省市联动效果的简单实例
2014/02/10 Javascript
浅谈JavaScript的Polymer框架中的事件绑定
2015/07/29 Javascript
Backbone.js框架中简单的View视图编写学习笔记
2016/02/14 Javascript
js图片上传前预览功能(兼容所有浏览器)
2016/08/24 Javascript
js获取元素的标签名实现方法
2016/10/08 Javascript
彻底学会Angular.js中的transclusion
2017/03/12 Javascript
jquery实现异步加载图片(懒加载图片一种方式)
2017/04/24 jQuery
html5+canvas实现支持触屏的签名插件教程
2017/05/08 Javascript
使用Node.js实现RESTful API的示例
2017/08/01 Javascript
详解如何用typescript开发koa2的二三事
2018/11/13 Javascript
小程序登录态管理的方法示例
2018/11/13 Javascript
Vue.js 无限滚动列表性能优化方案
2019/12/02 Javascript
基于Vue全局组件与局部组件的区别说明
2020/08/11 Javascript
解决vant框架做H5时踩过的坑(下拉刷新、上拉加载等)
2020/11/11 Javascript
如何在Express4.x中愉快地使用async的方法
2020/11/18 Javascript
Python中第三方库Requests库的高级用法详解
2017/03/12 Python
使用pytorch进行图像的顺序读取方法
2018/07/27 Python
在python下读取并展示raw格式的图片实例
2019/01/24 Python
使用django的objects.filter()方法匹配多个关键字的方法
2019/07/18 Python
python for循环remove同一个list过程解析
2019/08/14 Python
Python必须了解的35个关键词
2020/07/16 Python
Python基于argparse与ConfigParser库进行入参解析与ini parser
2021/02/02 Python
迪卡侬印尼体育用品商店:Decathlon印尼
2020/03/11 全球购物
remote接口和home接口主要作用
2013/05/15 面试题
机械加工与数控专业自荐书
2014/06/04 职场文书
歌颂党的演讲稿
2014/09/10 职场文书
纪念九一八事变演讲稿1000字
2014/09/14 职场文书
政协委员个人总结
2015/03/03 职场文书
2015年乡镇环保工作总结
2015/04/22 职场文书
Android中View.post和Handler.post的关系
2022/06/05 Java/Android