This article introduces the implementation of Vue asynchronous loading of Gaode maps and shares them with you, as follows:
Several ways to load js
- Synchronous loading
- Asynchronous loading
- Delay loading
- Synchronous loading
The most commonly used method, also known as blocking mode, will prevent the browser from subsequent processing and stop subsequent parsing. Only when the current loading is completed can the next operation be carried out. Therefore, the default synchronization execution is safe. But in this way, if there are behaviors such as outputting document content, modifying dom, and redirecting in js, it will cause the page to be blocked. Therefore, it is generally recommended to place the <script> tag at the end of <body> to minimize page blockage.
<script src="/maps?v=1.4.7&key=Your applicationkeyvalue"></script>
Asynchronous loading
Asynchronous loading is also called non-blocking loading. While downloading and executing js, the browser will continue to process the subsequent page. There are three main ways.
Dynamically create script tags
let script = ("script"); = "text/javascript"; = "///maps?v=1.4.6&key="+key+"&callback=init"; = reject; (script);
The new <script> element loads the source file. Download this file immediately after the element is added to the page. The key to this technology is: no matter where the download is started, the download and running of the file will not block other page processing processes, making full use of the browser's multi-process, but be careful that the browser does not guarantee the order of file loading.
defer attribute
The defer property specifies whether script execution is delayed until the page loads.
async attribute
The definition and usage of async (a property of HTML5). The async property specifies that once the script is available, it will be executed asynchronously.
If there is no async and defer attributes, the browser will immediately execute the current js script and block the subsequent script; if there is an async attribute, the process of loading and rendering subsequent document elements will be carried out in parallel with the loading and execution of the current js (asynchronous); if there is a defer attribute, the process of loading subsequent document elements will be carried out in parallel with the loading (asynchronous), but the execution must be completed after all elements (DOM) parsing is completed and the DOMContentLoaded event is fired.
How to introduce Gaode Map
Sequential synchronous loading
In this way, the map initialization code should be placed after the script tag of the JS API:
<script src="/maps?v=1.4.7&key=Your applicationkeyvalue"></script> <script type="text/javascript"> var map = new ('container', { center:[117.000923,36.675807], zoom:11 }); </script>
This method has obvious disadvantages, 1: It will cause the page to load very slowly; 2: If the page of a single page is not used in the page, this js file will also be loaded, which is unnecessary.
Asynchronous loading
Asynchronous loading refers to the callback function that specifies the loading for the JS API. After the main resource of the JS API is loaded, the callback function will be automatically called. The callback function should declare that before the JS API entry file reference, asynchronous loading can reduce blockage of other script execution. We also recommend using the asynchronous method under HTTPS:
<script type="text/javascript"> = function(){ var map = new ('container', { center:[117.000923,36.675807], zoom:11 }); } </script> <script src="/maps?v=1.4.6&key=Your applicationkeyvalue&callback=init"></script>
or
= function(){ var map = new ('container'); } var url = '/maps?v=1.4.6&key=Your applicationkeyvalue&callback=onLoad'; var jsapi = ('script'); = 'utf-8'; = url; (jsapi);
The introduction of Gaode map in the vue project
How to introduce Gaode Map in the component development of vue? I wrote a file
export function MP(key) { return new Promise(function (resolve, reject) { = function () { resolve(AMap) }; let script = ("script"); = "text/javascript"; = "///maps?v=1.4.6&key="+key+"&callback=init"; = reject; (script); }) }
Then in the vue component used in Gaode Map
import {MP} from '../../../utils/loadMap'; MP('d275691902d1744cad9a7ddc1fc20657').then(function (AMap) { = false; initAMapUI(); // InitAMapUI is called here to initialize (AMap); }).catch(err=>{ = true; })
Small pit
Here I not only used Gaode Map, but also used the UI library of the map. Introduce the entry file of the UI component library after the Gaode Map JavaScript API:
Synchronization method:
<!--Introducing Gaode MapJSAPI --> <script src="///maps?v=1.3&key=The key value you applied for"></script> <!--IntroducedUIComponent library(1.0Version) --> <script src="///ui/1.0/"></script>
Asynchronous method
<!--Asynchronous loading Gaode MapJSAPI ,Notice callback parameter--> <script src="///maps?v=1.3&key=The key value you applied for&callback=my_init"></script> <!--IntroducedUIAsynchronous version of component library(1.0Version) --> <script src="///ui/1.0/"></script> <script type="text/javascript"> //JSAPI callback entryfunction my_init() { initAMapUI(); // InitAMapUI is called here to initialize //Other logic} </script>
The key is that the UI library depends on the map js file. Here, we can implement the callback onload function and () function that is loaded by js. The file is as follows:
export function MP(key) { const p1 = new Promise(function (resolve, reject) { = function () { ('script1-------onload'); resolve(AMap) }; let script = ("script"); = "text/javascript"; = "///maps?v=1.4.6&key="+key+"&callback=init"; = reject; (script); }); const p2 = new Promise(function (resolve,reject) { let script2 = ("script"); = "text/javascript"; = "///ui/1.0/"; = reject; = function(su){ ('script2-------onload',su); resolve('success') }; (script2); }); return ([p1,p2]) .then(function (result) { ('result----------->',result); return result[0] }).catch(e=>{ (e);}) };
The success callback in then returns rusult is an array representing the results of p1 and p2 respectively. Here, only the results of p1 (map object) are returned.
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.