1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64
| <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> #container { width: 1280px; height: 720px; } </style> </head> <body> <div id="container"></div> <script src="https://webapi.amap.com/loader.js"></script> <script type="text/javascript"> window._AMapSecurityConfig = { securityJsCode: "9f9d9391b3ba92237652b8a93fe47d96", }; AMapLoader.load({ key: "f843b51e9bc03fe1f14969aa27e78449", version: "2.0", }) .then((AMap) => { const gps = [116.405285, 39.904989]; const points = [ { weight: 1, lnglat: ["116.506647", "39.795337"] }, { weight: 1, lnglat: ["116.843352", "40.377362"] }, { weight: 1, lnglat: ["116.637122", "40.324272"] }, { weight: 1, lnglat: ["116.105381", "39.937183"] }, { weight: 1, lnglat: ["116.653525", "40.128936"] }, { weight: 1, lnglat: ["116.486409", "39.921489"] }, { weight: 1, lnglat: ["116.658603", "39.902486"] }, { weight: 1, lnglat: ["116.338033", "39.728908"] }, { weight: 1, lnglat: ["116.235906", "40.218085"] }, { weight: 1, lnglat: ["116.366794", "39.915309"] }, { weight: 1, lnglat: ["116.418757", "39.917544"] }, { weight: 1, lnglat: ["116.139157", "39.735535"] }, { weight: 1, lnglat: ["116.195445", "39.914601"] }, { weight: 1, lnglat: ["116.310316", "39.956074"] }, { weight: 1, lnglat: ["116.286968", "39.863642"] }, ];
const map = new AMap.Map("container", { center: gps, zoom: 8, }); const _renderMarker = function (context) { var content = '<img width="14" height="18" src="https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png"></img>'; context.marker.setContent(content); }; map.plugin(["AMap.MarkerCluster"], function () { cluster = new AMap.MarkerCluster(map, points, { gridSize: 60, renderMarker: _renderMarker, }); }); }) .catch((e) => { console.error(e); }); </script> </body> </html>
|