详解在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 相关文章推荐
jQuery页面图片伴随滚动条逐渐显示的小例子
Mar 21 Javascript
JQuery boxy插件在IE中边角图片不显示问题的解决
May 20 Javascript
js自定义回调函数
Dec 13 Javascript
[原创]JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】
Nov 01 Javascript
wap手机端解决返回上一页的js实例
Dec 08 Javascript
Bootstrap 表单验证formValidation 实现远程验证功能
May 17 Javascript
vue2中的keep-alive使用总结及注意事项
Dec 21 Javascript
Vue使用vux-ui自定义表单验证遇到的问题及解决方法
May 10 Javascript
Vue表单控件绑定图文详解
Feb 11 Javascript
JS添加或删除HTML dom元素的方法实例分析
Mar 05 Javascript
详谈Vue.js框架下main.js,App.vue,page/index.vue之间的区别
Aug 12 Javascript
swiperjs实现导航与tab页的联动
Dec 13 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的开合式多级菜单程序
2006/10/09 PHP
php实现在服务器端调整图片大小的方法
2015/06/16 PHP
PHP使用CURL模拟登录的方法
2015/07/08 PHP
PHP数组函数知识汇总
2016/05/12 PHP
CodeIgniter框架常见用法工作总结
2017/03/16 PHP
PHP7 字符串处理机制修改
2021/03/09 PHP
驱动事件的addEvent.js代码
2007/03/27 Javascript
一个js写的日历(代码部分网摘)
2009/09/20 Javascript
IFrame跨域高度自适应实现代码
2012/08/16 Javascript
jQuery中fadeIn、fadeOut、fadeTo的使用方法(图片显示与隐藏)
2013/05/08 Javascript
Jjcarousellite 实现图片列表滚动的简单实例
2013/11/29 Javascript
Javascript基础教程之变量
2015/01/18 Javascript
JavaScript中的anchor()方法使用详解
2015/06/08 Javascript
简述AngularJS相关的一些编程思想
2015/06/23 Javascript
Javascript创建类和对象详解
2017/05/31 Javascript
Vue仿支付宝支付功能
2018/05/25 Javascript
详解Vue.directive 自定义指令
2019/03/27 Javascript
javascript实现简单页面倒计时
2021/03/02 Javascript
Python中return self的用法详解
2018/07/27 Python
python调用支付宝支付接口流程
2019/08/15 Python
python爬虫 批量下载zabbix文档代码实例
2019/08/21 Python
python3 tcp的粘包现象和解决办法解析
2019/12/09 Python
关于Tensorflow 模型持久化详解
2020/02/12 Python
五分钟带你搞懂python 迭代器与生成器
2020/08/30 Python
整理HTML5的一些新特性与Canvas的常用属性
2016/01/29 HTML / CSS
The Beach People美国:澳洲海滨奢华品牌
2018/07/05 全球购物
世界闻名的衬衫制造商:Savile Row Company
2018/07/30 全球购物
Diamondback自行车:拥有你的冒险
2019/04/22 全球购物
到底Java是如何传递参数的?是by value或by reference?
2012/07/13 面试题
长青弘远的面试题
2012/06/09 面试题
经典导游欢迎词大全
2014/01/16 职场文书
师德师风承诺书
2014/05/23 职场文书
试用期工作表现自我评价
2015/03/06 职场文书
幼儿园老师工作总结2015
2015/05/22 职场文书
晚会开幕词范文
2016/03/04 职场文书
浅谈Vue的computed计算属性
2022/03/21 Vue.js