详解在HTTPS 项目中使用百度地图 API的方法_F11 - 专业站长和开发者的学习网站

分享到

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

JavaScript 来源：互联网搜集作者：秩名发布时间：2019-04-27 10:00:02 人浏览

摘要

本篇文章介绍在HTTPS 项目中使用百度地图 API的方法。百度地图 API 产品简介百度地图 JavaScript API 是一套由 JavaScript 语言编写的应用程序接口，可帮助您在网站中构建功能丰富、交互性强的地图应用，支持 PC 端和移动端基于浏览器的地图应用开发，且支

本篇文章介绍在HTTPS 项目中使用百度地图 API的方法。

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

那么百度地图的 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 才可以。

不知道是不是官方进行过优化，下面两张图是今日实测的结果：

可以看到添加 &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(
 `<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://blog.csdn.net/weixin_41632399/article/details/89156702

Tag : HTTPS(9)API(34)百度地图(12)

vue el-switch初始值(默认值)不能正确显示状态问题

el-switch 初始值（默认值）不能正确显示状态先去检查一下接口返回格式如果是字符串不需要加冒号 1 active-value=1 inactive-value=2 如果是数字
微信小程序跳转外部链接的实现方法

微信小程序跳转外部链接在开发小程序过程中，我们可能会有这样的需求，在小程序中打开H5或者外部链接实现方法如下： 1、配置业务域
自己写一个uniapp全局弹窗(APP端)

效果图： uniapp自带的提示框不符合我们的要求，需要自己写一个提示框，且全局通用。解决思路: 使用 plus.nativeObj 来绘制窗口以及事件监听
JavaScript console对象与控制台使用介绍

1. console对象 console对象是JavaScript的原生对象,提供了很多用于调试的方法,如console.log输出信息,console.count记录执行次数 1 console.log(console); 2.
JavaScript错误处理机制全面分析介绍

1. Error 实例 JavaScript在运行错误时会抛出一个错误,JS提供了Error构造函数,所有抛出的错误都是这个构造函数的实例 1 2 const err = new Error(代码出
JavaScript Object.defineProperty与proxy代理模式的使用详

1. Object.defineProperty 1 2 const obj = {}; Object.defineProperty(obj,prop,descript); 参数 obj 要定义属性的对象 prop 要定义的属性 descript 属性描述符返回值
Javascript Object对象类型使用介绍

1. 生成方法对象是javaScript中的一种数据类型,它是key-value的合集，是无序的 1 2 3 4 const obj = { name: ian,age: 21}; //key使用变量 const gender = gender
JavaScript代码不能被阻断的稳定性建设

背景稳定性建设之JavaScript代码不能被阻断 js代码可能会因为某些原因，导致出错，进而整个后续代码有可能都被阻断。直接影响线上的稳定
JavaScript前端学算法题解LeetCode最大重复子字符串

最大重复子字符串给你一个字符串sequence，如果字符串word连续重复k次形成的字符串是sequence的一个子字符串，那么单词word的重复值为k。单
uni-app小程序沉浸式导航实现的全过程

项目要在多个页面上加自定义导航栏，还要有渐变效果，就是随着页面上滑，导航栏透明度由0逐渐变为1。这里面有几个基本点需要注意下。