先上官网leaflet官网中文官网展示地图link relstylesheet hrefleaflet/leaflet.css/ script typetext/javascript srcleaflet/leaflet-src.js/scriptdiv idmapid/divconst mymap L.map(mapid).setView([38.97649, 112.47803], 14); L.tileLayer(https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png, { attribution: copy; a hrefhttps://www.openstreetmap.org/copyrightOpenStreetMap/a contributors }).addTo(mymap);添加点 线 圆点L.marker([37.85008, 112.4455]).addTo(mymap) .bindPopup(街道)多个点L.layerGroup([marker1, marker2]).addTo(map);如果是非常多的点可以用下面的点聚合 或者海量点线const latlngs [ [38.44498, 111.02783], [38.37612, 113.37891], [37.16032, 111.26953], [38.97649, 112.47803], [36.80928, 113.02734], [38.44498, 111.02783] ]; const polyline L.polyline(latlngs, {color: red}).addTo(mymap); // zoom the map to the polyline mymap.fitBounds(polyline.getBounds());圆L.circle([37.89220, 112.34619], { radius: 135000,//半径距离 color: red,//颜色 fill: false,//是否填充 interactive: false,//false 不会触发点击事件 只会做为底图 }).addTo(mymap);添加移动轨迹在上面的基础上添加一个leaflet插件leaflet.motionleaflet.motion地址script typetext/javascript srcleaflet/leaflet.motion.min.js/scriptvar latlngArr [[34.52466, 110.23682], [35.40696, 113.51074], [36.41067, 113.71509], [36.70894, 113.49756]] var carIcon L.icon({ iconUrl:img/close.png, iconSize:[25.1,25], }); L.motion.polyline(latlngArr,{ color:red },{ auto:true, duration:10000, easing:L.Motion.Ease.easeInOutQuart },{ removeOnEnd:false, icon:carIcon }).addTo(mymap)点聚合能力借助点聚合能力插件/** 点聚合能力实现 head里面 引入js文件还有样式 link relstylesheet href./leaflet/dianjuhe/MarkerCluster.css/ link relstylesheet href./leaflet/dianjuhe/MarkerCluster.Default.css/ script src./leaflet/dianjuhe/leaflet.markercluster-src.js/ */ var markers L.markerClusterGroup({ icon: L.icon({ iconUrl: img/close.png, iconSize: [25.1, 25], }), //控制界面上面显示得图标 iconCreateFunction: function(cluster) { if (cluster.getChildCount()1){ return new L.Icon({ iconUrl: /img/has_point.png, iconSize: [20, 20], }) }else { return carIcon } // return L.divIcon({ html: b/b }); } }); for (var i 0; i Areas.length; i) { var a Areas[i]; var title a.name; var marker L.marker(new L.LatLng(a.latitude, a.longitude), {title: title}); //permanent 是永久打开工具提示还是仅在鼠标悬停时打开。 marker.bindTooltip(tip-fori, { direction: top, permanent: true, offset: L.point(0, -8) }).openTooltip() markers.addLayer(marker); } myMap.addLayer(markers);在地图上随意手动画点、线、多边形、圆也是借助插件Geoman// head中引入 script typetext/javascript src./leaflet-geoman.min.js/script link relstylesheet href./leaflet-geoman.css///添加可以画圆画点画多边形的菜单 且有监听 myMap.pm.addControls({ position: bottomleft, drawPolygon: true, // 添加绘制多边形 drawMarker: true, //添加按钮以绘制标记 drawCircleMarker: false, //添加按钮以绘制圆形标记 drawPolyline: true, //添加按钮绘制线条 drawRectangle: true, //添加按钮绘制矩形 drawCircle: true, // 添加按钮绘制圆圈 editMode: true, // 添加按钮编辑多边形 dragMode: true, // 添加按钮拖动多边形 cutPolygon: true, // 添加一个按钮以删除图层里面的部分内容 removalMode: true, // 清除图层 }) myMap.on(pm:drawstart, (e) { //绘制开始时事件 console.log(e, 开始); }); myMap.on(pm:create, (e) { console.log(e, 绘制完成时调用); if (e.shape Rectangle) { alert(e.layer._latlngs[0]); //获取绘制的坐标 } else if (e.shape Circle) {//圆形 console.log(圆心经纬度 e.layer._latlng, 半径 e.layer._mRadius) } else if (e.shape Line) { console.log(e.layer._latlngs) } else if (e.shape Polygon) { console.log(e.layer._latlngs) } });