Map resource loading method and device, equipment and storage medium
By creating asynchronous call methods in the target JS file and converting them to synchronous calls, the project blocking problem caused by map resource loading failures was resolved, thus improving loading efficiency.
Patent Information
- Authority / Receiving Office
- CN · China
- Patent Type
- Patents(China)
- Current Assignee / Owner
- CHINA UNITED NETWORK COMM GRP CO LTD
- Filing Date
- 2023-01-31
- Publication Date
- 2026-06-02
AI Technical Summary
When remote loading of map resources fails, the execution of subsequent code in the project is blocked, preventing further operation and resulting in poor loading efficiency.
Create asynchronous call methods in the target JS file to load JS and CSS resources respectively, and convert them into synchronous call methods using preset syntax to display the target map on the target page.
This solution resolves the project blocking issue caused by map resource loading failures and improves the efficiency of loading map resources.
Smart Images
Figure CN116028744B_ABST
Abstract
Description
Technical Field
[0001] This application relates to the field of communication technology, and in particular to a method, apparatus, device and storage medium for loading map resources. Background Technology
[0002] The current page can load map resources synchronously, which means placing the map resources in the head tag of the index.html file at the entry point of the Visual User Environment (VUE) component. The head tag allows the map resources to be imported before the page initializes the map code, so as to avoid the situation where the map resources cannot be loaded when the map is initialized.
[0003] In the above method, if the map resource loading fails when the page loads it remotely via a Vue component, it will block the execution of subsequent code (i.e., map initialization code), causing the project to stop running. Therefore, loading map resources is inefficient. Summary of the Invention
[0004] This application provides a map resource loading method, apparatus, device, and storage medium to avoid the problem of map resource loading failure on a remote page, which would prevent the project from continuing to run, thereby improving the efficiency of loading map resources.
[0005] To achieve the above objectives, this application adopts the following technical solution:
[0006] Firstly, a map resource loading method is provided, comprising: creating a target JS file in a target system, and creating a first method and a second method in the target JS file, wherein the target system is used to display the target map through a target page, the first method is used to add JS resources to the target page, and the second method is used to add Cascading Style Sheets (CSS) resources to the target page, and the first and second methods are asynchronous call methods; creating a first promise in the first method and a second promise in the second method, wherein the first promise is used to request JS resources from the server, and the second promise is used to request CSS resources from the server; importing the first and second methods into a target component, and converting the first and second methods into synchronous call methods based on a preset syntax; loading JS resources through the first method and loading CSS resources through the second method, so as to display the target map through the target page in the target system.
[0007] In one possible implementation, before creating a first promise in the first method and a second promise in the second method, the method further includes: receiving a first parameter in the first method and receiving a second parameter in the second method, where both the first and second parameters are used to determine the Uniform Resource Locator URL of the external script file.
[0008] In one possible implementation, the method further includes: declaring a first variable in the first promise and assigning the created script tag to the first variable; declaring the type of the first variable as text / javascript and assigning the first parameter to the SRC property of the first variable, the SRC property of the first variable being used to reference the source file corresponding to the address of the JS resource through the first parameter; adding a script tag to the target page and returning the first promise after calling the load event of the script tag.
[0009] In one possible implementation, the method further includes: declaring a second variable in the second promise and assigning the created link tag to the second variable; declaring the REL property of the second variable as stylesheet and assigning the second parameter to the SRC property of the second variable, the SRC property of the second variable being used to reference the source file corresponding to the address of the CSS resource through the second parameter; adding a link tag to the target page and returning the second promise after calling the load event of the link tag.
[0010] In one possible implementation, the first method and the second method are converted into synchronous call methods based on a preset syntax, including: creating a new target function in the methods of the target component based on the preset syntax, and calling the first method and the second method in the target function, thereby converting the first method and the second method into synchronous call methods.
[0011] Secondly, a map resource loading device is provided, comprising: a processing unit and a transmission unit; the processing unit is used to create a target JS file in a target system, and to create a first method and a second method in the target JS file, the target system being used to display a target map through a target page, the first method being used to add JS resources to the target page, and the second method being used to add Cascading Style Sheets (CSS) resources to the target page, the first method and the second method being asynchronous call methods; the processing unit is also used to create a first promise in the first method and a second promise in the second method, the first promise being used to request JS resources from the server, and the second promise being used to request CSS resources from the server; the transmission unit is used to import the first method and the second method into a target component; the processing unit is also used to convert the first method and the second method into synchronous call methods based on a preset syntax; the processing unit is also used to load JS resources through the first method and CSS resources through the second method, so as to display the target map through the target page in the target system.
[0012] In one possible implementation, the transmission unit is further configured to receive a first parameter in a first method and a second parameter in a second method, both the first and second parameters being used to determine the Uniform Resource Locator URL of the external script file.
[0013] In one possible implementation, the processing unit is further configured to declare a first variable in the first promise and assign the created script tag to the first variable; the processing unit is further configured to declare the type of the first variable as text / javascript and assign the first parameter to the SRC property of the first variable, the SRC property of the first variable being used to reference the source file corresponding to the address of the JS resource through the first parameter; the processing unit is further configured to add a script tag to the target page and return the first promise after calling the load event of the script tag.
[0014] In one possible implementation, the processing unit is further configured to declare a second variable in the second promise and assign the created link tag to the second variable; the processing unit is further configured to declare the REL property of the second variable as stylesheet and assign the second parameter to the SRC property of the second variable, the SRC property of the second variable being used to reference the source file corresponding to the address of the CSS resource through the second parameter; the processing unit is further configured to add a link tag to the target page and return the second promise after calling the load event of the link tag.
[0015] In one possible implementation, the processing unit is also used to create a new target function in the methods of the target component based on a preset syntax, and call the first method and the second method in the target function, converting the first method and the second method into synchronous call methods.
[0016] Thirdly, an electronic device includes a processor and a memory; wherein the memory stores one or more programs, the one or more programs including computer-executable instructions, and when the electronic device is running, the processor executes the computer-executable instructions stored in the memory to cause the electronic device to perform a map resource loading method as described in the first aspect.
[0017] Fourthly, a computer-readable storage medium is provided for storing one or more programs, the one or more programs including instructions that, when executed by a computer, cause the computer to perform a map resource loading method as described in the first aspect.
[0018] This application provides a map resource loading method, apparatus, device, and storage medium, applicable to scenarios involving map resource loading. When map resources need to be loaded, a target JS file can be created in a target system used to display the target map on a target page. Within the target JS file, a first method for adding JS resources to the target page and a second method for adding CSS resources to the target page are created. Then, a first promise for requesting JS resources from the server is created in the first method, and a second promise for requesting CSS resources from the server is created in the second method. Further, the first and second methods are imported into the target component, and based on a preset syntax, they are converted into synchronous call methods. This allows the first method to load JS resources and the second method to load CSS resources, enabling the target map to be displayed on the target page in the target system. This method solves the problem of blocking subsequent code execution and preventing the project from continuing when synchronous remote loading of map resources fails. Therefore, the efficiency of loading map resources is improved. Attached Figure Description
[0019] Figure 1 A schematic diagram of a map resource loading system structure provided for an embodiment of this application;
[0020] Figure 2 A schematic flowchart of a map resource loading method provided for embodiments of this application. Figure 1 ;
[0021] Figure 3 A schematic flowchart of a map resource loading method provided for embodiments of this application. Figure 2 ;
[0022] Figure 4 A schematic flowchart of a map resource loading method provided for embodiments of this application. Figure 3 ;
[0023] Figure 5 A schematic flowchart of a map resource loading method provided for embodiments of this application. Figure 4 ;
[0024] Figure 6 A schematic flowchart of a map resource loading method provided for embodiments of this application. Figure 5 ;
[0025] Figure 7 A schematic diagram of the structure of a map resource loading device provided for an embodiment of this application;
[0026] Figure 8 This is a schematic diagram of an electronic device structure provided for an embodiment of this application. Detailed Implementation
[0027] The technical solutions in the embodiments of this application will now be described with reference to the accompanying drawings.
[0028] In the description of this application, unless otherwise stated, " / " means "or". For example, A / B can mean A or B. "And / or" in this document is merely a description of the relationship between related objects, indicating that three relationships can exist. For example, A and / or B can represent: A alone, A and B simultaneously, and B alone. Furthermore, "at least one" and "multiple" refer to two or more. The terms "first," "second," etc., do not limit the quantity or order of execution, and "first," "second," etc., do not necessarily imply differences.
[0029] The current page can load map resources synchronously, placing the map resources within the `<head>` tag of the `index.html` file at the Vue component's entry point. This ensures that the necessary map resources are included via the `<head>` tag before the map initialization code, preventing situations where map resources fail to load during map initialization. However, this method is susceptible to problems if remote map resource loading fails, blocking the execution of subsequent code and rendering the project unusable, thus impacting users.
[0030] This application provides a map resource loading method. When map resources need to be loaded, a target JS file can be created in a target system used to display a target map on a target page. Within the target JS file, a first method for adding JS resources to the target page and a second method for adding CSS resources to the target page are created. Then, a first promise for requesting JS resources from the server is created in the first method, and a second promise for requesting CSS resources from the server is created in the second method. Further, the first and second methods are imported into the target component, and based on a preset syntax, they are converted into synchronous call methods. This allows the JS resources to be loaded via the first method and the CSS resources via the second method, enabling the target map to be displayed on the target page in the target system. This method solves the problem of blocking the execution of subsequent code and preventing the project from continuing to run when synchronous remote loading of map resources fails. Therefore, it improves the efficiency of loading map resources.
[0031] The map resource loading method provided in this application embodiment can be applied to map resource loading systems. Figure 1 A schematic diagram of the map resource loading system is shown. (For example...) Figure 1 As shown, the map resource loading system 20 includes a server 21 and a terminal device 22. The server 21 sends JavaScript (JS) resources and Cascading Style Sheets (CSS) resources to the terminal device 22. The terminal device 22 requests and retrieves the JS and CSS resources from the server 21, loads the JS and CSS resources, and displays the target map on the target page in the target system, thus enabling the loading of map resources through the server 21 and the terminal device 22.
[0032] The following description, in conjunction with the accompanying drawings, illustrates a map resource loading method provided by an embodiment of this application. For example... Figure 2 As shown in the figure, an embodiment of this application provides a map resource loading method, which is applied to an electronic device. The method includes S201-S204:
[0033] S201. Create a target JS file in the target system, and create a first method and a second method in the target JS file.
[0034] The target system is used to display the target map through the target page. The first method is used to add JS resources to the target page, and the second method is used to add Cascading Style Sheets (CSS) resources to the target page. The first and second methods are asynchronous call methods.
[0035] It is understandable that a target JS file can be created in a target system for displaying a target map on a target page via an electronic device, and a first method for adding JS resources to the target page and a second method for adding Cascading Style Sheets (CSS) resources to the target page can be created in the target JS file.
[0036] Alternatively, you can create a new file with the .js extension (i.e., the target JS file) in the folder corresponding to the project (i.e., the target system), and create two methods (i.e., the first method and the second method) in that file.
[0037] It should be noted that JS is a just-in-time compiled programming language. JS resources can be used for logical processing in page writing, while CSS resources can be used for graphic editing (such as editing graphic styles and color depth).
[0038] S202. Create a first promise in the first method and a second promise in the second method.
[0039] The first promise is used to request JS resources from the server, and the second promise is used to request CSS resources from the server.
[0040] It is understandable that the electronic device can create a first promise in the first method to request JS resources from the server, and create a second promise in the second method to request CSS resources from the server.
[0041] Alternatively, the first method can add JS resources to the target page through the first promise, and the second method can add CSS resources to the target page through the second promise.
[0042] Optionally, after creating a first promise in the first method and a second promise in the second method, the first and second methods can be exported from the corresponding folders in the project via the target JS file.
[0043] It should be noted that promises are a solution for asynchronous programming.
[0044] S203. Import the first method and the second method into the target component, and convert the first method and the second method into synchronous call methods based on the preset syntax.
[0045] It is understandable that electronic devices can import the first method and the second method into the target component, and convert the first method and the second method into synchronous call methods based on a preset syntax.
[0046] Optionally, the first and second methods exported from the target JS file can be imported into the component (i.e., the target component) that needs to use map resources (i.e., JS and CSS resources). Then, using the syntax features of ECMAScript 7's async and await syntax (i.e., the default syntax), the first and second methods, which are asynchronous call methods, are converted into synchronous call methods.
[0047] Optionally, the async and await syntax can be placed before the first and second methods imported in the target component.
[0048] S204. Load JS resources using the first method and CSS resources using the second method to display the target map on the target page in the target system.
[0049] It is understandable that electronic devices can load JS resources through the first method and CSS resources through the second method in order to display the target map on the target page in the target system.
[0050] Optionally, the first and second methods imported in the component can be called as needed, with the Uniform Resource Locator (URL) parameter corresponding to the first method and the URL parameter corresponding to the second method passed in, and then a map instance is created and the map is initialized.
[0051] This application provides a map resource loading method. When map resources need to be loaded, a target JS file can be created in a target system used to display a target map on a target page. Within the target JS file, a first method for adding JS resources to the target page and a second method for adding CSS resources to the target page are created. Then, a first promise for requesting JS resources from the server is created in the first method, and a second promise for requesting CSS resources from the server is created in the second method. Further, the first and second methods are imported into the target component, and based on a preset syntax, they are converted into synchronous call methods. This allows the JS resources to be loaded via the first method and the CSS resources via the second method, enabling the target map to be displayed on the target page in the target system. This method solves the problem of blocking the execution of subsequent code and preventing the project from continuing to run when synchronous remote loading of map resources fails. Therefore, it improves the efficiency of loading map resources.
[0052] In a design, such as Figure 3 As shown, the map resource loading method provided in this application embodiment further includes step S301 before step S202:
[0053] S301, Receive the first parameter in the first method and the second parameter in the second method.
[0054] The first and second parameters are both used to determine the Uniform Resource Locator URL of the external script file.
[0055] It is understandable that the first method can receive a first parameter for determining the URL of the external script file, and the second method can receive a second parameter for determining the URL of the external script file.
[0056] Optionally, the URL of the external script file determined by the first parameter (i.e., the URL parameter corresponding to the first method) can be the address of the source file (i.e., the external script file) corresponding to the JS resource on the server, and the URL of the external script file determined by the second parameter (i.e., the URL parameter corresponding to the second method) can be the address of the source file (i.e., the external script file) corresponding to the CSS resource on the server.
[0057] In a design, such as Figure 4 As shown in the embodiment of this application, a map resource loading method is provided, which further includes steps S401-S403:
[0058] S401. Declare the first variable in the first promise and assign the created script tag to the first variable.
[0059] It's understandable that you can declare the first variable in the first promise and assign the created script tag to the first variable.
[0060] Alternatively, a script tag can be created using the native JavaScript createElement method (i.e., the document.createElement() method), and the created script tag can be assigned to the first variable.
[0061] It should be noted that assigning the created script tag to the first variable can simplify program writing; in this case, the first variable can be considered equivalent to the script tag.
[0062] S402. Declare the type of the first variable as text / javascript, and assign the first parameter to the SRC property of the first variable.
[0063] The SRC attribute of the first variable is used to reference the source file corresponding to the address of the JS resource through the first parameter.
[0064] It is understandable that you can declare the type of the first variable as text / javascript, and assign the first parameter to the SRC property of the source file corresponding to the address of the JS resource referenced by the first parameter.
[0065] S403. Add a script tag to the target page, and after calling the load event of the script tag, return the first promise.
[0066] It's understandable that you can add a script tag to the target page and return the first promise after calling the script tag's load event.
[0067] Alternatively, you can use the native JavaScript appendChild method (i.e., the document.body.appendChild() method) to add a script tag to the HyperText Markup Language (HTML) page (i.e., the target page), and after calling the onload event corresponding to the script tag, call the resolve and reject methods in the onload event method of the script tag, and finally return the first promise.
[0068] It should be noted that the purpose of calling the onload event corresponding to the script tag is to send a request to the server through the onload event to obtain JS resources.
[0069] In a design, such as Figure 5 As shown in the embodiment of this application, a map resource loading method is provided, which further includes steps S501-S503:
[0070] S501. In the second promise, declare the second variable and assign the created link tag to the second variable.
[0071] It's understandable that a second variable can be declared in the second promise, and the created link tag can be assigned to the second variable.
[0072] Alternatively, a link tag can be created using the native JavaScript createElement method (i.e., the document.createElement() method), and the created link tag can be assigned to the second variable.
[0073] It should be noted that assigning the created link tag to the second variable can simplify program writing; in this case, the second variable can be considered equivalent to the link tag.
[0074] S502. Declare the REL property of the second variable as stylesheet, and assign the second parameter to the SRC property of the second variable.
[0075] The SRC property of the second variable is used to reference the source file corresponding to the address of the CSS resource through the second parameter.
[0076] It is understandable that the REL property of the second variable can be declared as stylesheet, and the second parameter can be assigned to the SRC property of the second variable, which is used to reference the source file of the CSS resource through the address of the second parameter.
[0077] It should be noted that declaring the rel property of the second variable as stylesheet indicates that the linked document (i.e., the source file corresponding to the CSS resource) is a stylesheet.
[0078] S503. Add a link tag to the target page, and after calling the load event of the link tag, return the second promise.
[0079] It's understandable that a link tag can be added to the target page, and a second promise can be returned after the link tag's load event is called.
[0080] Alternatively, you can use the native JavaScript appendChild method (i.e., the document.body.appendChild() method) to add a link tag to the HTML page, and after calling the onload event corresponding to the link tag, call the resolve and reject methods in the onload event method of the link tag, and finally return the second promise.
[0081] It should be noted that the purpose of calling the onload event corresponding to the link tag is to send a request to the server through the onload event to obtain CSS resources.
[0082] In a design, such as Figure 6 As shown, the map resource loading method provided in this application embodiment includes step S203, which involves "converting the first method and the second method into a synchronous call method based on a preset syntax". Specifically, step S601 includes:
[0083] S601. Based on the preset syntax, create a new target function in the methods of the target component, and call the first method and the second method in the target function, converting the first method and the second method into synchronous call methods.
[0084] It is understandable that a target function can be created in the methods of the target component based on the preset syntax, and the first and second methods can be called in the target function, thus converting the first and second methods into synchronous call methods.
[0085] It should be noted that, in the case of step S601, the method in step S203 above may specifically include "importing the first method and the second method into the target component".
[0086] This application provides a map resource loading method. This method can place the map resources to be loaded in the component that needs to use the map, so as to avoid affecting the execution of other pages in the system if there is a problem with remotely loading map resources, thereby reducing the risk of failure.
[0087] The foregoing mainly describes the solutions provided by the embodiments of this application from a methodological perspective. To achieve the above functions, it includes corresponding hardware structures and / or software modules for executing each function. Those skilled in the art should readily recognize that, in conjunction with the units and algorithm steps of the various examples described in the embodiments disclosed herein, the embodiments of this application can be implemented in hardware or a combination of hardware and computer software. Whether a function is executed in hardware or by computer software driving hardware depends on the specific application and design constraints of the technical solution. Those skilled in the art can use different methods to implement the described functions for each specific application, but such implementation should not be considered beyond the scope of this application.
[0088] This application embodiment can divide a map resource loading method into functional modules based on the above method example. For example, each function can be divided into its own functional modules, or two or more functions can be integrated into one processing module. The integrated module can be implemented in hardware or as a software functional module. Optionally, the module division in this application embodiment is illustrative and only represents one logical functional division; other division methods may be used in actual implementation.
[0089] Figure 7 This is a schematic diagram of a map resource loading device provided in an embodiment of this application. Figure 7 As shown, a map resource loading device 40 is used to improve the efficiency of loading map resources, for example, for performing... Figure 2 A map resource loading method is shown. The map resource loading device 40 includes: a processing unit 401 and a transmission unit 402;
[0090] Processing unit 401 is used to create a target JS file in the target system, and to create a first method and a second method in the target JS file. The target system is used to display a target map through a target page. The first method is used to add JS resources to the target page, and the second method is used to add Cascading Style Sheets (CSS) resources to the target page. The first method and the second method are asynchronous call methods.
[0091] The processing unit 401 is also used to create a first promise in the first method and a second promise in the second method. The first promise is used to request JS resources from the server and the second promise is used to request CSS resources from the server.
[0092] The transmission unit 402 is used to import the first method and the second method into the target component;
[0093] Processing unit 401 is also used to convert the first method and the second method into synchronous calling methods based on a preset syntax;
[0094] The processing unit 401 is also used to load JS resources through a first method and CSS resources through a second method to display the target map on the target page in the target system.
[0095] In one possible implementation, the transmission unit 402 is further configured to receive a first parameter in a first method and a second parameter in a second method, wherein both the first parameter and the second parameter are used to determine the Uniform Resource Locator URL of the external script file.
[0096] In one possible implementation, processing unit 401 is further configured to declare a first variable in the first promise and assign the created script tag to the first variable; processing unit 401 is further configured to declare the type of the first variable as text / javascript and assign the first parameter to the SRC property of the first variable, the SRC property of the first variable being used to reference the source file corresponding to the address of the JS resource through the first parameter; processing unit 401 is further configured to add a script tag to the target page and return the first promise after calling the load event of the script tag.
[0097] In one possible implementation, processing unit 401 is further configured to declare a second variable in the second promise and assign the created link tag to the second variable; processing unit 401 is further configured to declare the REL property of the second variable as stylesheet and assign the second parameter to the SRC property of the second variable, the SRC property of the second variable being used to reference the source file corresponding to the address of the CSS resource through the second parameter; processing unit 401 is further configured to add a link tag to the target page and return the second promise after calling the load event of the link tag.
[0098] In one possible implementation, the processing unit is also used to create a new target function in the methods of the target component based on a preset syntax, and call the first method and the second method in the target function, converting the first method and the second method into synchronous call methods.
[0099] In the case where the functions of the integrated modules described above are implemented in hardware, this application provides a possible structural schematic diagram of the electronic device involved in the above embodiments. For example... Figure 8 As shown, an electronic device 60 is used to improve the efficiency of loading map resources, for example, for performing... Figure 2 This illustrates a method for loading map resources. The electronic device 60 includes a processor 601, a memory 602, and a bus 603. The processor 601 and the memory 602 are connected via the bus 603.
[0100] Processor 601 is the control center of the communication device. It can be a single processor or a collective term for multiple processing elements. For example, processor 601 can be a general-purpose central processing unit (CPU) or other general-purpose processors. Among them, the general-purpose processor can be a microprocessor or any conventional processor.
[0101] As one embodiment, processor 601 may include one or more CPUs, for example Figure 8 CPU 0 and CPU 1 are shown in the diagram.
[0102] The memory 602 may be a read-only memory (ROM) or other type of static storage device capable of storing static information and instructions, random access memory (RAM) or other type of dynamic storage device capable of storing information and instructions, or electrically erasable programmable read-only memory (EEPROM), disk storage media or other magnetic storage devices, or any other medium capable of carrying or storing desired program code in the form of instructions or data structures and accessible by a computer, but is not limited thereto.
[0103] As one possible implementation, the memory 602 can exist independently of the processor 601. The memory 602 can be connected to the processor 601 via a bus 603 and is used to store instructions or program code. When the processor 601 calls and executes the instructions or program code stored in the memory 602, it can implement the map resource loading method provided in this embodiment of the application.
[0104] In another possible implementation, the memory 602 can also be integrated with the processor 601.
[0105] Bus 603 can be an industry standard architecture (ISA) bus, a peripheral component interconnect (PCI) bus, or an extended industry standard architecture (EISA) bus. This bus can be divided into address bus, data bus, control bus, etc. For ease of representation, Figure 8 The bus is represented by a single thick line, but this does not mean that there is only one bus or one type of bus.
[0106] It should be pointed out that, Figure 8 The structure shown does not constitute a limitation on the electronic device 60. Except... Figure 8 In addition to the components shown, the electronic device 60 may include more or fewer components than illustrated, or combine certain components, or have different component arrangements.
[0107] As an example, combined Figure 7 The functions implemented by the processing unit 401 and the transmission unit 402 in the map resource loading device 40 are the same as those of the processing unit 401 and the transmission unit 402. Figure 8 The processor 601 in it has the same function.
[0108] Optional, such as Figure 8 As shown, the electronic device 60 provided in this application embodiment may further include a communication interface 604.
[0109] Communication interface 604 is used to connect with other devices via a communication network. This communication network can be Ethernet, a wireless access network, a wireless local area network (WLAN), etc. Communication interface 604 may include a receiving unit for receiving data and a transmitting unit for transmitting data.
[0110] In one design, the communication interface in the electronic device provided in this application embodiment can also be integrated into the processor.
[0111] Through the above description of the embodiments, those skilled in the art will clearly understand that, for the sake of convenience and brevity, only the division of the above functional units is used as an example. In practical applications, the above functions can be assigned to different functional units as needed, that is, the internal structure of the device can be divided into different functional units to complete all or part of the functions described above. The specific working process of the system, device, and unit described above can be referred to the corresponding process in the foregoing method embodiments, and will not be repeated here.
[0112] This application also provides a computer-readable storage medium storing instructions. When a computer executes these instructions, the computer performs each step of the method flow shown in the above-described method embodiments.
[0113] Embodiments of this application provide a computer program product containing instructions that, when executed on a computer, cause the computer to perform a map resource loading method as described in the above method embodiments.
[0114] The computer-readable storage medium may be, for example, but not limited to, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination thereof. More specific examples of computer-readable storage media (a non-exhaustive list) include: an electrical connection having one or more wires, a portable computer disk, a hard disk, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM), registers, hard disks, optical fibers, compact disc read-only memory (CD-ROM), optical storage devices, magnetic storage devices, or any suitable combination of the foregoing, or any other form of computer-readable storage medium in the art.
[0115] An exemplary storage medium is coupled to a processor, enabling the processor to read information from and write information to the storage medium. Of course, the storage medium can also be a component of the processor. The processor and storage medium can reside within an application-specific integrated circuit (ASIC).
[0116] In the embodiments of this application, the computer-readable storage medium can be any tangible medium that contains or stores a program that can be used by or in conjunction with an instruction execution system, apparatus, or device.
[0117] Since the electronic devices, computer-readable storage media, and computer program products in the embodiments of this application can be applied to the above methods, the technical effects they can achieve can also be referred to the above method embodiments. The embodiments of this application will not be repeated here.
[0118] The above are merely specific embodiments of this application, but the scope of protection of this application is not limited thereto. Any changes or substitutions within the technical scope disclosed in this application should be covered within the scope of protection of this application.
Claims
1. A method for loading map resources, characterized in that, The method includes: A target JS file is created in the target system, and a first method and a second method are created in the target JS file. The target system is used to display a target map through a target page. The first method is used to add JS resources to the target page, and the second method is used to add Cascading Style Sheets (CSS) resources to the target page. The first method and the second method are asynchronous call methods. In the first method, a first promise is created, and in the second method, a second promise is created. The first promise is used to request the JS resource from the server, and the second promise is used to request the CSS resource from the server. A first variable is declared in the first promise, and the created script tag is assigned to the first variable. The first variable is declared to be of type text / javascript, and the first parameter is assigned to the SRC property of the first variable. The SRC property of the first variable is used to reference the source file corresponding to the address of the JS resource through the first parameter. Add the script tag to the target page, and after calling the load event of the script tag, return the first promise; In the second promise, declare the second variable and assign the created link tag to the second variable; The REL property of the second variable is declared as stylesheet, and the second parameter is assigned to the SRC property of the second variable. The SRC property of the second variable is used to reference the source file corresponding to the address of the CSS resource through the second parameter. Add the link tag to the target page, and after calling the load event of the link tag, return the second promise; Import the first method and the second method into the target component, and convert the first method and the second method into synchronous call methods based on preset syntax; the preset syntax includes async syntax and await syntax; the conversion of the first method and the second method into synchronous call methods based on preset syntax means that the asynchronous code of the first method and the second method is written in a structure similar to synchronous code by using the preset syntax on top of promise; The JS resource is loaded using the first method, and the CSS resource is loaded using the second method, so as to display the target map on the target page in the target system.
2. The method according to claim 1, characterized in that, Before creating a first promise in the first method and creating a second promise in the second method, the method further includes: The first method receives a first parameter, and the second method receives a second parameter, both of which are used to determine the Uniform Resource Locator URL of the external script file.
3. The method according to claim 1 or 2, characterized in that, The step of converting the first method and the second method into synchronous call methods based on a preset syntax includes: Based on the preset syntax, a new target function is created in the methods of the target component, and the first method and the second method are called in the target function, converting the first method and the second method into synchronous call methods.
4. A map resource loading device, characterized in that, The map resource loading device includes: a processing unit and a transmission unit; The processing unit is used to create a target JS file in the target system, and to create a first method and a second method in the target JS file. The target system is used to display a target map through a target page. The first method is used to add JS resources to the target page, and the second method is used to add Cascading Style Sheets (CSS) resources to the target page. The first method and the second method are asynchronous call methods. The processing unit is further configured to create a first promise in the first method and a second promise in the second method, wherein the first promise is used to request the JS resource from the server and the second promise is used to request the CSS resource from the server. The processing unit is further configured to declare a first variable in the first promise and assign the created script tag to the first variable; The processing unit is further configured to declare the type of the first variable as text / javascript, and assign the first parameter to the SRC property of the first variable, wherein the SRC property of the first variable is used to reference the source file corresponding to the address of the JS resource through the first parameter; The processing unit is further configured to add the script tag to the target page, and after calling the load event of the script tag, return the first promise; The processing unit is further configured to declare a second variable in the second promise and assign the created link tag to the second variable; The processing unit is further configured to declare the REL property of the second variable as stylesheet, and assign the second parameter to the SRC property of the second variable, wherein the SRC property of the second variable is used to reference the source file corresponding to the address of the CSS resource through the second parameter; The processing unit is further configured to add the link tag to the target page, and after calling the load event of the link tag, return the second promise; The transmission unit is used to import the first method and the second method into the target component; The processing unit is further configured to convert the first method and the second method into synchronous call methods based on a preset syntax; the preset syntax includes async syntax and await syntax; the conversion of the first method and the second method into synchronous call methods based on the preset syntax means that the asynchronous code of the first method and the second method is written in a structure similar to that of synchronous methods by using the preset syntax on top of promises; The processing unit is further configured to load the JS resource using the first method and the CSS resource using the second method, so as to display the target map on the target page in the target system.
5. The map resource loading device according to claim 4, characterized in that, The transmission unit is further configured to receive a first parameter in the first method and a second parameter in the second method, wherein both the first parameter and the second parameter are used to determine the Uniform Resource Locator URL of the external script file.
6. The map resource loading device according to claim 4 or 5, characterized in that, The processing unit is further configured to create a new target function in the methods of the target component based on the preset syntax, and call the first method and the second method in the target function, converting the first method and the second method into synchronous call methods.
7. An electronic device, characterized in that, include: A processor and a memory; wherein the memory is used to store one or more programs, the one or more programs including computer execution instructions, and when the electronic device is running, the processor executes the computer execution instructions stored in the memory to cause the electronic device to perform a map resource loading method according to any one of claims 1-3.
8. A computer-readable storage medium for storing one or more programs, characterized in that, The one or more programs include instructions that, when executed by a computer, cause the computer to perform a map resource loading method as described in any one of claims 1-3.