AMapUI.html 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
  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>JSAPI Loader</title>
  8. <style>
  9. html,
  10. body,
  11. #container {
  12. height: 100%;
  13. width: 100%;
  14. margin: 0;
  15. }
  16. </style>
  17. </head>
  18. <body>
  19. <div id="container" tabindex="0"></div>
  20. <script src="../dist/index.js"></script>
  21. <script>
  22. AMapLoader.load({
  23. key: '',//首次load必填
  24. version: '2.0Beta',
  25. plugins: ['AMap.Scale'],
  26. AMapUI: {
  27. plugins: ['overlay/SimpleMarker'],
  28. }
  29. }).then((AMap) => {
  30. map = new AMap.Map('container');
  31. map.addControl(new AMap.Scale());
  32. new AMapUI.SimpleMarker({
  33. //前景文字
  34. iconLabel: 'A',
  35. //图标主题
  36. iconTheme: 'default',
  37. //背景图标样式
  38. iconStyle: 'red',
  39. //...其他Marker选项...,不包括content
  40. map: map,
  41. position: map.getCenter()
  42. });
  43. }).catch((e) => {
  44. console.error(e);
  45. });
  46. setTimeout(function () {
  47. AMapLoader.load({
  48. plugins: ['AMap.MapType']
  49. }).then((AMap) => {
  50. map.addControl(new AMap.MapType())
  51. }).catch((e) => {
  52. console.error(e);
  53. });
  54. }, 5000);
  55. </script>
  56. </script>
  57. </body>
  58. </html>