百度地圖 API 產品簡介

宣州網站制作公司哪家好，找創新互聯！從網頁設計、網站建設、微信開發、APP開發、響應式網站設計等網站項目制作，到程序開發，運營維護。創新互聯成立于2013年到現在10年的時間，我們擁有了豐富的建站經驗和運維經驗，來保證我們的工作的順利進行。專注于網站建設就選創新互聯。

百度地圖 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 項目中使用百度地圖 API詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對創新互聯網站的支持！

本文題目：詳解在HTTPS項目中使用百度地圖API
鏈接分享：http://vcdvsql.cn/article16/pepegg.html

成都網站建設公司_創新互聯，為您提供全網營銷推廣、響應式網站、電子商務、微信公眾號、小程序開發、品牌網站設計

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯