Loca.html 1.9 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
  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. Loca: {
  27. version: '1.3.2'
  28. }
  29. }).then((AMap) => {
  30. var map = new AMap.Map('container', {
  31. zoom: 4,
  32. center: [107.4976, 32.1697],
  33. features: ['bg', 'road'],
  34. // Loca 自 1.2.0 起 viewMode 模式默认为 3D,如需 2D 模式,请显示配置。
  35. // viewMode: '3D'
  36. });
  37. var layer = new Loca.PointLayer({
  38. map: map
  39. });
  40. layer.setData(districts, {
  41. // 指定经纬度所在字段
  42. lnglat: 'center'
  43. });
  44. layer.setOptions({
  45. style: {
  46. // 圆形半径,单位像素
  47. radius: 5,
  48. // 填充颜色
  49. color: '#07E8E4',
  50. // 描边颜色
  51. borderColor: '#5DFBF9',
  52. // 描边宽度,单位像素
  53. borderWidth: 1,
  54. // 透明度 [0-1]
  55. opacity: 0.9,
  56. }
  57. });
  58. layer.render();
  59. }).catch((e) => {
  60. console.error(e);
  61. });
  62. </script>
  63. </script>
  64. </body>
  65. </html>