详解在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 相关文章推荐
JavaScript 更严格的相等 [译]
Sep 20 Javascript
JavaScript起点(严格模式深度了解)
Jan 28 Javascript
setTimeout自动触发一个js的方法
Jan 15 Javascript
利用Jquery实现可多选的下拉框
Feb 21 Javascript
JavaScript电子时钟倒计时第二款
Jan 10 Javascript
js实现手机发送验证码功能
Mar 13 Javascript
JavaScript实现时间表动态效果
Jul 15 Javascript
AngularJS实现表单元素值绑定操作示例
Oct 11 Javascript
Vue实现导航栏点击当前标签变色功能
Aug 19 Javascript
Vue设置长时间未操作登录自动到期返回登录页
Jan 22 Javascript
JavaScript运行机制实例分析
Apr 11 Javascript
vue 使用微信jssdk,调用微信相册上传图片功能
Nov 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查看session内容的函数
2008/08/27 PHP
深入mysql_fetch_row()与mysql_fetch_array()的区别详解
2013/06/05 PHP
ThinkPHP3.1新特性之命名范围的使用
2014/06/19 PHP
yii用户注册表单验证实例
2015/12/26 PHP
最新版本PHP 7 vs HHVM 多角度比较
2016/02/14 PHP
PHP程序员的技术成长规划
2016/03/25 PHP
浅谈PHP发送HTTP请求的几种方式
2017/07/25 PHP
TP5(thinkPHP框架)实现后台清除缓存功能示例
2019/05/29 PHP
Laravel 不同生产环境服务器的判断实践
2019/10/15 PHP
laravel5.6实现数值转换
2019/10/23 PHP
Jquery easyui 下loaing效果示例代码
2013/08/12 Javascript
javascript设置连续两次点击按钮时间间隔的方法
2014/10/28 Javascript
分享两个手机访问pc网站自动跳转手机端网站代码
2020/12/24 Javascript
Bootstrap+jfinal实现省市级联下拉菜单
2016/05/30 Javascript
JS实现“隐藏与显示”功能(多种方法)
2016/11/24 Javascript
浅谈Vue 数据响应式原理
2018/05/07 Javascript
vue  自定义组件实现通讯录功能
2018/09/30 Javascript
jQuery操作cookie的示例代码
2019/06/05 jQuery
js实现鼠标点击页面弹出自定义文字效果
2019/12/24 Javascript
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
2020/05/29 jQuery
JavaScript实现拖动对话框效果的实现代码
2020/10/12 Javascript
[01:00]DOTA2 store: Collection of Artisan's Wonders
2015/08/12 DOTA
Python日期操作学习笔记
2008/10/07 Python
python字符串对其居中显示的方法
2015/07/11 Python
详解关于Django中ORM数据库迁移的配置
2018/10/08 Python
Python实现的统计文章单词次数功能示例
2019/07/08 Python
python安装读取grib库总结(推荐)
2020/06/24 Python
详解使用postMessage解决iframe跨域通信问题
2019/11/01 HTML / CSS
学校后勤岗位职责
2014/02/19 职场文书
活动总结的格式
2014/05/07 职场文书
文明家庭先进事迹材料
2014/05/14 职场文书
食堂标语大全
2014/06/11 职场文书
导游词之河北邯郸
2019/09/12 职场文书
导游词之西递宏村
2019/12/10 职场文书
JavaScript实现班级抽签小程序
2021/05/19 Javascript
以下牛机,你有几个
2022/04/05 无线电