博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
在 HTTPS 项目中使用百度地图 API
阅读量:6206 次
发布时间:2019-06-21

本文共 1797 字,大约阅读时间需要 5 分钟。

百度地图 API 产品简介

百度地图 JavaScript API 是一套由 JavaScript 语言编写的应用程序接口,可帮助您在网站中构建功能丰富、交互性强的地图应用,支持 PC 端和移动端基于浏览器的地图应用开发,且支持 HTML5 特性的地图开发。 百度地图 JavaScript API 支持 HTTP 和 HTTPS,免费对外开放,可直接使用。接口使用无次数限制。在使用前,您需先申请密钥(ak)才可使用。

基础使用

引用百度地图 API, 将 "您的密匙" 替换为你在百度地图申请的 AK, 即可使用。

复制代码

更多问题

问题1. https项目

在 https 项目中通过http导入会出现以下问题:

那么百度地图的 JavaScript API 是否支持 HTTPS 请求呢?

答案是当然支持

JavaScript API V2.0 及以上版本支持 HTTPS。 如果想使用 HTTPS 协议调用 JavaScript API,直接将脚本引用的协议修改为 HTTPS 即可。

复制代码

以上是官方文档介绍的用法,在用搜索引擎查找问题解决方案时,看到前辈们的技术博客都说使用 <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=您的密钥"></script> 不能达到预期效果,必须添加参数 &s=1 才可以。 不知道是不是官方进行过优化,下面两张图是今日实测的结果:

可以看到添加
&s=1 后所得到的结果与没添加时是
一致的

问题2. 浏览器警告

在部分浏览器(如谷歌)中会产生警告如下:

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(    ``    );  })();复制代码

可以得知正是这段代码中的 document.write 引发的警告。那么我们通过 <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() 要记得添加上,避免产生其他问题。

转载地址:http://aokja.baihongyu.com/

你可能感兴趣的文章
《游戏大师Chris Crawford谈互动叙事》一9.1 文字冒险游戏
查看>>
《不只是美:信息图表设计原理与经典案例》—— 1.2 可视化是一种技术
查看>>
详解 UEFI 模式下安装 Linux
查看>>
数据库中的索引、键和约束
查看>>
JVM运行时数据区
查看>>
《云数据管理:挑战与机遇》2.1 向量时钟
查看>>
《C#本质论(第4版)》一1.4 小结
查看>>
《网页设计与前端开发 Dreamweaver+Flash+Photoshop+HTML+CSS+JavaScript 从入门到精通》——2.4 网页的主体标记body...
查看>>
Netty 5用户指南(一)
查看>>
《Android游戏开发详解》一第1部分 Java基础知识
查看>>
【云周刊】第125期:高考恢复40年!你们要的大数据解读来啦
查看>>
GitLab Flow 的 11 条规则
查看>>
暗渡陈仓:用低消耗设备进行破解和渗透测试3.3 基于Ubuntu方案的选项
查看>>
每日Ubuntu小技巧:Ubuntu中通过Cheese支持Webcam
查看>>
《JavaScript启示录》——1.11 原始值(String、Number、Boolean)在被用做对象时就像对象...
查看>>
Hadoop报错:Failed to locate the winutils binary in the hadoop binary path
查看>>
eclipse 无法导入 import javax.servlet.http.HttpServlet
查看>>
【云栖大会】阿里云助力实现“工业互联,云上智造”
查看>>
码栈开发手册(四)---编码方式开发(图片相关函数)
查看>>
Apache Spark技术实战(一)Standalone部署模式下的临时文件清理&日志级别修改
查看>>