详解在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刷新框架中的其他页面 &amp;&amp; JS刷新窗口方法汇总
Jul 08 Javascript
JS实现带提示的星级评分效果完整实例
Oct 30 Javascript
JavaScript字符串常用的方法
Mar 10 Javascript
jquery动态创建div与input的实例代码
Oct 12 Javascript
AngularJS中transclude用法详解
Nov 03 Javascript
js的三种继承方式详解
Jan 21 Javascript
js和jquery中获取非行间样式
May 05 jQuery
深入理解Vue 的条件渲染和列表渲染
Sep 01 Javascript
React styled-components设置组件属性的方法
Aug 07 Javascript
ES6知识点整理之函数对象参数默认值及其解构应用示例
Apr 17 Javascript
基于jQuery实现挂号平台首页源码
Jan 06 jQuery
《javascript设计模式》学习笔记一:Javascript面向对象程序设计对象成员的定义分析
Apr 07 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安装为Apache DSO
2006/10/09 PHP
windows环境下php配置memcache的具体操作步骤
2013/06/09 PHP
部署PHP时的4个配置修改说明
2015/10/19 PHP
PHP内核学习教程之php opcode内核实现
2016/01/27 PHP
php导出csv文件,可导出前导0实例代码
2016/11/16 PHP
老生常谈PHP 文件写入和读取(必看篇)
2017/05/22 PHP
PHP基于自定义类随机生成姓名的方法示例
2017/08/05 PHP
Laravel框架实现文件上传的方法分析
2019/09/29 PHP
浅谈laravel中的关联查询with的问题
2019/10/10 PHP
浏览器无法运行JAVA脚本的解决方法
2008/01/09 Javascript
对 lightbox JS 图片控件进行了一下改造, 使其他支持复杂的图片说明
2010/03/20 Javascript
javascript学习笔记(五)正则表达式
2011/04/08 Javascript
nodejs中exports与module.exports的区别详细介绍
2013/01/14 NodeJs
js/jquery解析json和数组格式的方法详解
2014/01/09 Javascript
JavaScript中的slice()方法使用详解
2015/06/06 Javascript
JS获取中文拼音首字母并通过拼音首字母快速查找页面内对应中文内容的方法【附demo源码】
2016/08/19 Javascript
jquery删除table当前行的实例代码
2016/10/07 Javascript
pc加载更多功能和移动端下拉刷新加载数据
2016/11/07 Javascript
js实现div色块碰撞
2020/01/16 Javascript
javascript设计模式 ? 命令模式原理与用法实例分析
2020/04/20 Javascript
vue组件开发之slider组件使用详解
2020/08/21 Javascript
HTML元素拖拽功能实现的完整实例
2020/12/04 Javascript
tensorflow TFRecords文件的生成和读取的方法
2018/02/06 Python
Python人工智能之路 jieba gensim 最好别分家之最简单的相似度实现
2019/08/13 Python
python:目标检测模型预测准确度计算方式(基于IoU)
2020/01/18 Python
Django多数据库联用实现方法解析
2020/11/12 Python
详解python的变量缓存机制
2021/01/24 Python
马来西亚网上购物:Youbeli
2018/03/30 全球购物
丹麦优惠购物网站:PLUSSHOP
2019/03/24 全球购物
应届生会计求职信
2013/11/11 职场文书
音乐器材管理制度
2014/01/31 职场文书
中等生评语大全
2014/05/04 职场文书
“六查”、“三学”、“三干”查摆问题整改措施
2014/09/27 职场文书
电子银行业务授权委托书
2014/10/10 职场文书
2014年办公室个人工作总结
2014/11/12 职场文书
Python快速实现一键抠图功能的全过程
2021/06/29 Python