欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

詳解在HTTPS 項目中使用百度地圖 API

 更新時間:2019年04月26日 15:22:57   作者:_陳平安  
這篇文章主要介紹了在HTTPS 項目中使用百度地圖 API,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

百度地圖 API 產(chǎn)品簡介

百度地圖 JavaScript API 是一套由 JavaScript 語言編寫的應(yīng)用程序接口,可幫助您在網(wǎng)站中構(gòu)建功能豐富、交互性強的地圖應(yīng)用,支持 PC 端和移動端基于瀏覽器的地圖應(yīng)用開發(fā),且支持 HTML5 特性的地圖開發(fā)。
百度地圖 JavaScript API 支持 HTTP 和 HTTPS,免費對外開放,可直接使用。接口使用無次數(shù)限制。在使用前,您需先申請密鑰(ak)才可使用。

基礎(chǔ)使用

引用百度地圖 API, 將 “您的密匙” 替換為你在百度地圖申請的 AK, 即可使用。

<script
 type="text/javascript"
 src="http://api.map.baidu.com/api?v=3.0&ak=您的密鑰"
></script>

更多問題

問題1. https項目
在 https 項目中通過http導(dǎo)入會出現(xiàn)以下問題:

那么百度地圖的 JavaScript API 是否支持 HTTPS 請求呢?
答案是當(dāng)然的。

JavaScript API V2.0 及以上版本支持 HTTPS。
如果想使用 HTTPS 協(xié)議調(diào)用 JavaScript API,直接將腳本引用的協(xié)議修改為 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>

以上是官方文檔介紹的用法,在用搜索引擎查找問題解決方案時,看到前輩們的技術(shù)博客都說使用 <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=您的密鑰"></script> 不能達(dá)到預(yù)期效果,必須添加參數(shù) &s=1 才可以。
不知道是不是官方進(jìn)行過優(yōu)化,下面兩張圖是今日實測的結(jié)果:


可以看到添加 &s=1 后所得到的結(jié)果與沒添加時是__一致的__。
問題2. 瀏覽器警告
在部分瀏覽器(如谷歌)中會產(chǎn)生警告如下:

 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調(diào)用。此腳本的網(wǎng)絡(luò)請求可能由于網(wǎng)絡(luò)連接不良而被瀏覽器在此頁面加載或?qū)淼捻撁婕虞d中阻止。如果在此頁面加載中被阻止,將在隨后的控制臺消息中確認(rèn)。更多詳情參見

那么我們來分析一下百度地圖API導(dǎo)入得到的JavaScript的代碼

 (function() {
  window.BMAP_PROTOCOL = "https"; // https導(dǎo)入會有此行代碼
  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 引發(fā)的警告。那么我們在HTML文件中直接使用 <script type="text/javascript" src="https://api.map.baidu.com/getscript?v=3.0&ak='您的密鑰'&services=&t=20190301102433"> </script> 導(dǎo)入百度地圖的API就可以避免此警告。不過這樣導(dǎo)入時,缺失的另外兩行 window.BMAP_PROTOCOL = "https"window.BMap_loadScriptTime = (new Date).getTime() 一定要記得添加到項目中,避免產(chǎn)生其他問題。

以上所述是小編給大家介紹的在HTTPS 項目中使用百度地圖 API詳解整合,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!

相關(guān)文章

  • js實現(xiàn)簡易的單數(shù)字隨機抽獎(0-9)

    js實現(xiàn)簡易的單數(shù)字隨機抽獎(0-9)

    這篇文章主要介紹了js實現(xiàn)簡易的單數(shù)字0-9隨機抽獎,可以控制抽取隨機數(shù)開始與停止,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2015-08-08
  • js簡單實現(xiàn)刪除記錄時的提示效果

    js簡單實現(xiàn)刪除記錄時的提示效果

    刪除記錄時的提示效果,挺人性化的,實現(xiàn)的方法有很多,在本文為大家介紹下使用js是如何實現(xiàn)的
    2013-12-12
  • mui框架移動開發(fā)初體驗詳解

    mui框架移動開發(fā)初體驗詳解

    本篇文章主要介紹了mui框架移動開發(fā)初體驗詳解小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-10-10
  • JavaScript如何調(diào)試有哪些建議和技巧附五款有用的調(diào)試工具

    JavaScript如何調(diào)試有哪些建議和技巧附五款有用的調(diào)試工具

    這篇文章給大家介紹javascript如何調(diào)試有哪些建議和技巧,涉及到j(luò)avascript調(diào)試方法相關(guān)知識,對javascript調(diào)試方法感興趣的朋友可以參考下本篇文章
    2015-10-10
  • Bootstrap媒體對象的實現(xiàn)

    Bootstrap媒體對象的實現(xiàn)

    在web頁面中,圖片居左,內(nèi)容居右排列,是非常常見的效果,它也就是媒體對象,它是一種抽象的樣式,可以用來構(gòu)建不同類型的組件。本文給大家介紹Bootstrap媒體對象的實現(xiàn),感興趣的朋友一起學(xué)習(xí)吧
    2016-05-05
  • javascript hasFocus使用實例

    javascript hasFocus使用實例

    hasFocus是document的特有方法.用來判斷當(dāng)前網(wǎng)頁是否獲得焦點.
    2010-06-06
  • JavaScript實現(xiàn)動態(tài)表格的示例代碼

    JavaScript實現(xiàn)動態(tài)表格的示例代碼

    動態(tài)表格是指在網(wǎng)頁上顯示的數(shù)據(jù)表格,可以根據(jù)用戶輸入或頁面元素的變化動態(tài)更新內(nèi)容,本文主要介紹了JavaScript實現(xiàn)動態(tài)表格的示例代碼,感興趣的可以了解一下
    2024-04-04
  • javascript中的數(shù)字與字符串相加實例分析

    javascript中的數(shù)字與字符串相加實例分析

    javascript中的數(shù)字與字符串相加實例分析,學(xué)習(xí)js的朋友可以參考下。
    2011-08-08
  • axios學(xué)習(xí)教程全攻略

    axios學(xué)習(xí)教程全攻略

    axios 是一個基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端,下面這篇文章主要給大家介紹了axios學(xué)習(xí)教程的相關(guān)資料,文中介紹的非常詳細(xì),對大家具有一定的參考價值,需要的朋友下面來一起看看吧。
    2017-03-03
  • js實現(xiàn)axios限制請求隊列

    js實現(xiàn)axios限制請求隊列

    本文主要介紹了js實現(xiàn)axios限制請求隊列,文中通過示例代碼介紹的非常詳細(xì),需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2021-07-07

最新評論