example.html 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
  7. <title>AMap JSAPI Loader</title>
  8. <style>
  9. html, body, #container {
  10. height: 100%;
  11. width: 100%;
  12. margin: 0;
  13. }
  14. </style>
  15. </head>
  16. <body>
  17. <div id="container" tabindex="0"></div>
  18. <script src="https://webapi.amap.com/loader.js"></script>
  19. <script>
  20. AMapLoader.load({ //首次调用 load
  21. key:'你申请的高德开放平台 Web 端 key',//首次load key为必填
  22. version:'2.0',
  23. plugins:['AMap.Scale','AMap.ToolBar']
  24. }).then((AMap)=>{
  25. map = new AMap.Map('container');
  26. map.addControl(new AMap.Scale())
  27. map.addControl(new AMap.ToolBar())
  28. map.add(new AMap.Marker({
  29. position:map.getCenter()
  30. }));
  31. }).catch((e)=>{
  32. console.error(e);
  33. });
  34. AMapLoader.load({ //可多次调用load
  35. plugins:['AMap.MapType']
  36. }).then((AMap)=>{
  37. map.addControl(new AMap.MapType())
  38. }).catch((e)=>{
  39. console.error(e);
  40. });
  41. </script>
  42. </body>
  43. </html>