JSAPI 加载器

使用加载器加载JSAPI,可以避免异步加载、重复加载等常见错误加载错误。 https://www.npmjs.com/package/@amap/amap-jsapi-loader

源代码编辑器

 <!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
 <title>AMap JSAPI Loader</title>
 <style>
 html, body, #container {
 height: 100%;
 width: 100%;
 margin: 0;
 }
 </style>
 <script src="https://webapi.amap.com/loader.js"></script>
</head>
<body>
<div id="container" tabindex="0"></div>
<script>
 var map;
 AMapLoader.load({ //首次调用 load
 key:'309f07ac6bc48160e80b480ae511e1e9',//首次load key为必填
 version:'2.0',
 plugins:['AMap.Scale','AMap.ToolBar']
 }).then((AMap)=>{
 map = new AMap.Map('container');
 map.addControl(new AMap.Scale())
 map.addControl(new AMap.ToolBar())
 map.add(new AMap.Marker({
 position:map.getCenter()
 }));
 }).catch((e)=>{
 console.error(e);
 });
 
 AMapLoader.load({ //可多次调用load
 plugins:['AMap.MapType']
 }).then((AMap)=>{
 map.addControl(new AMap.MapType())
 }).catch((e)=>{
 console.error(e);
 });
 
</script>
</body>
</html>
 
 

控制台

清空

示例中心常见问题