Baidu Map API product introduction

Baidu Map JavaScript API is a set of application programming interface written by JavaScript language, which can help you build a rich and interactive map application in the website. It supports PC and mobile browser based map application development, and supports HTML5 features of map development. Baidu Map JavaScript API support HTTP and HTTPS, free of charge, can be used directly. The number of times the interface can be used is unlimited. Before using it, you need to apply for a key (AK).

Based on using

Use Baidu Map API, replace “your key” with the AK you applied for in Baidu Map, and you can use it.

<script
  type="text/javascript"
  src="Http://api.map.baidu.com/api?v=3.0&ak= your key"
></script>
Copy the code

More problems

Problem 1. HTTPS project

The following problems occur with HTTP imports in HTTPS projects:

Does baidu Map’s JavaScript API support HTTPS requests?

The answer is yes.

JavaScript API V2.0 and later support HTTPS. If you want to invoke the JavaScript API using HTTPS, you can simply change the protocol referenced by the script to HTTPS.

<script
  type="text/javascript"
  src="Https://api.map.baidu.com/api?v=2.0&ak= your key"
></script>
<script
  type="text/javascript"
  src="Https://api.map.baidu.com/api?v=3.0&ak= your key"
></script>
Copy the code

This is the official documentation for how to use a search engine to find a solution to a problem. See predecessors technology blog said use < script type = “text/javascript” SRC = “https://api.map.baidu.com/api?v=3.0&ak= your key” > < / script > cannot achieve the desired effect, The &s=1 parameter must be added. I don’t know if it has been officially optimized. The following two pictures are the actual results today:

&s=1
Consistent with the

Problem 2. Browser warning

In some browsers (such as Google), the following warning appears:

  A parser-blocking, cross site (i.e. different eTLD+1) script, 
  https:/ / api.map.baidu.com/getscript?v=3.0&ak= 'your key & 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.
Copy the code

A blocking parser, cross-site script, is called through document.write. Network requests for this script may be blocked by the browser during this page load or future page loads due to a poor network connection. If blocked during this page load, it will be confirmed in a subsequent console message. For more details see

So let’s analyze the JavaScript code that Baidu Map API imports

  (function() {
    window.BMAP_PROTOCOL = "https"; // HTTPS import will have this line of code
    window.BMap_loadScriptTime = new Date().getTime();
    document.write(
    ` < script type = "text/javascript" SRC = "https://api.map.baidu.com/getscript?v=3.0&ak=" your key & services = & t = 20190301102433 "> `); }) ();Copy the code

You can see that it is document.write in this code that raises the warning. So we say