Multi.html 2.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  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="https://a.amap.com/Loca/static/mock/districts.js"></script>
  21. <script src="../dist/index.js"></script>
  22. <script>
  23. AMapLoader.load({
  24. key: '',//首次load必填
  25. version: '1.4.15',
  26. AMapUI: {
  27. plugins: ['overlay/SimpleMarker'],
  28. },
  29. Loca: {
  30. version: '1.3.2'
  31. }
  32. }).then((AMap) => {
  33. var map = new AMap.Map('container', {
  34. zoom: 4,
  35. center: [107.4976, 32.1697],
  36. features: ['bg', 'road'],
  37. // Loca 自 1.2.0 起 viewMode 模式默认为 3D,如需 2D 模式,请显示配置。
  38. // viewMode: '3D'
  39. });
  40. new AMapUI.SimpleMarker({
  41. //前景文字
  42. iconLabel: 'A',
  43. //图标主题
  44. iconTheme: 'default',
  45. //背景图标样式
  46. iconStyle: 'red',
  47. //...其他Marker选项...,不包括content
  48. map: map,
  49. position: map.getCenter()
  50. });
  51. var layer = new Loca.PointLayer({
  52. map: map
  53. });
  54. layer.setData(districts, {
  55. // 指定经纬度所在字段
  56. lnglat: 'center'
  57. });
  58. layer.setOptions({
  59. style: {
  60. // 圆形半径,单位像素
  61. radius: 5,
  62. // 填充颜色
  63. color: '#07E8E4',
  64. // 描边颜色
  65. borderColor: '#5DFBF9',
  66. // 描边宽度,单位像素
  67. borderWidth: 1,
  68. // 透明度 [0-1]
  69. opacity: 0.9,
  70. }
  71. });
  72. layer.render();
  73. }).catch((e) => {
  74. console.error(e);
  75. });
  76. </script>
  77. </script>
  78. </body>
  79. </html>