Usage of plugins
The JS API provides numerous plugins, which need to be imported before their functions can be used.
These functions include but are not limited to:
1、Plugin usage process
1.1 Create a map
const map = new AMap.Map("container", {
zoom: 10, //Map level
center: [100.491422, 13.749313],
showOversea: true, //Enable world Map
mapStyle: "amap://styles/whitesmoke", //Set the display style of the map
viewMode: "2D",
});1.2 Introduce plugins
This example demonstrates asynchronous loading of plugins. Asynchronous loading refers to the process of loading a plugin on demand via the AMap.plugin method after the JS API has been loaded, and using the plugin functionality after the plugin callback.
//Asynchronously load the toolbar plugin
AMap.plugin("AMap.ToolBar", function () {
//Instantiate the plugin in the callback function and use the plugin functionality
});1.3 Create a plugin instance
//Instantiate the plugin in the callback function
var toolbar = new AMap.ToolBar(); //Create an instance of the toolbar plugin
map.addControl(toolbar); //Add the toolbar plugin to the pageUnder normal circumstances, avoid creating multiple instances repeatedly and reuse the same instance
1.4 Call instance methods to use related functions.
toolbar.hide() //Set toolbar hideThe toolbar.hide() method is the method to call the toolbar to hide. For different plugins, there are corresponding instance methods. After the plugin is instantiated, you can call the corresponding methods to control the plugin. For more plugin introductions, see the plugin list.
2、Plugin loading methods
Introduce plugins, supporting on-demand asynchronous loading and synchronous loading, allowing multiple plugins to be introduced simultaneously.
2.1 Asynchronously load multiple plugins
Using an array as the first parameter of AMap.plugin allows for simultaneous loading of multiple plugins.
AMap.plugin(["AMap.ToolBar", "AMap.Driving"], function () { //Asynchronously load multiple plugins simultaneously
var toolbar = new AMap.ToolBar(); //Create toolbar plugin instance
map.addControl(toolbar); //Add toolbar plugin to the page
var driving = new AMap.Driving(); //Create driving route planning instance
driving.search(/*parameter*/); //Call method on plugin instance
});2.2 Synchronously preload plugins
If you wish to load certain plugins synchronously with the main body of the JS API, rather than asynchronously, you can add the plugin parameter to the <script> loading address of the JS API, passing the name of one or more plugins you need to use as parameters. This method allows you to use the plugin functions directly after the JS API has finished loading.
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=The key value you applied for&plugin=AMap.ToolBar"></script>
<script type="text/javascript" >
var map = new AMap.Map('mapContainer',{
zoom:12,
center:[100.491422, 13.749313]
});
var toolbar = new AMap.ToolBar();
map.addControl(toolbar);
</script>2.3 Synchronously preload multiple plugins
When multiple plugins need to be loaded, separate the plugin names in the plugin parameter with English commas,.
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=The key value you applied for&plugin=AMap.ToolBar,AMap.Driving"></script>
<script type="text/javascript" >
var map = new AMap.Map('mapContainer',{
zoom:12,
center:[100.491422, 13.749313]
});
var toolbar = new AMap.ToolBar();
map.addControl(toolbar);
var driving = new AMap.Driving();
driving.search(/*parameter*/)
</script>