L7
G2
G6
F2
L7
墨者学院
关于 L7
图表示例
API 文档
使用教程
Gallery
城市自行车通勤
德国人口迁徙
台风数据可视化
线轨迹动画
点亮城市
热力图
入门
创建地图场景
传入地图实例
设置地图样式
获取地图信息
设置地图场景信息
地图控件配置项
数据源
点运动
GeoJSON点数据
GeoJSON 面数据
JSON 点数据
点图层
点数据颜色
点图层大小
点图层聚合
点图层文字标注
点图层形状
点图层图标
点图层3D柱状图
点图层海量点
线图层
3D 弧线图
绘制大圆航线
线颜色映射
线宽度映射
绘制虚线
线动画
一带一路
面图层
分级统计图
城市渲染
3D分级统计
热力图
网格热力图
热力图
蜂窝热力图
3D网格热力图
3D圆柱热力图
交互
数据过滤显示
滑过默认高亮
自定义高亮效果
图层事件
点击高亮
组件
添加图层列表图层
添加地图组件
图层添加popup
自定义图例组件
标注
默认地图Marker
绘制动效Marker
添加图表
自定义marker样式
栅格图层
栅格数据
图片图层
默认地图Marker
地图默认Marker 可设置不同颜色
源码
复制成功
复制失败
全屏
复制
运行
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="https://gw.alipayobjects.com/os/rmsportal/PqLCOJpqoOUfuPRacUzE.css" /> <title>默认地图Marker</title> <style> ::-webkit-scrollbar{display:none;}html,body{overflow:hidden;margin:0;} #map { position:absolute; top:0; bottom:0; width:100%; } </style> </head> <body> <div id="map"></div> <script>/*Fixing iframe window.innerHeight 0 issue in Safari*/ document.body.clientHeight; </script> <script src="https://webapi.amap.com/maps?v=1.4.8&key=15cd8a57710d40c9b7c0e3cc120f1200&plugin=Map3D"></script> <script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script> <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-1.3.0-beta.4/build/L7-min.js"></script> <script> var scene = new L7.Scene({ id: 'map', mapStyle: 'light', // 样式URL center: [120.19382669582967, 30.258134], pitch: 0, zoom: 4 }); scene.on('loaded', function() { new L7.Marker({ color: 'red' }).setLnglat([112, 32]).addTo(scene); new L7.Marker().setLnglat([114, 36]).addTo(scene); }); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="https://gw.alipayobjects.com/os/rmsportal/PqLCOJpqoOUfuPRacUzE.css" /> <title>默认地图Marker</title> <style> ::-webkit-scrollbar{display:none;}html,body{overflow:hidden;margin:0;} #map { position:absolute; top:0; bottom:0; width:100%; } </style> </head> <body> <div id="map"></div> <script>/*Fixing iframe window.innerHeight 0 issue in Safari*/ document.body.clientHeight; </script> <script src="https://webapi.amap.com/maps?v=1.4.8&key=15cd8a57710d40c9b7c0e3cc120f1200&plugin=Map3D"></script> <script src="https://gw.alipayobjects.com/os/antv/assets/lib/jquery-3.2.1.min.js"></script> <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.l7-1.3.0-beta.4/build/L7-min.js"></script> <script> var scene = new L7.Scene({ id: 'map', mapStyle: 'light', // 样式URL center: [120.19382669582967, 30.258134], pitch: 0, zoom: 4 }); scene.on('loaded', function() { new L7.Marker({ color: 'red' }).setLnglat([112, 32]).addTo(scene); new L7.Marker().setLnglat([114, 36]).addTo(scene); }); </script> </body> </html>