官网:https://leafletjs.com/
首先在官网下载【leaflet.css】和【leaflet.js】
引用js和css
<link href="js/leaflet.css" rel="stylesheet" /> <script src="js/leaflet.js" type="text/javascript"></script> <script src="js/jquery.min.js" type="text/javascript"></script> <style type="text/css"> //设置地图大小样式 #container { height: 100vh; width: 180vh; } .custom-content-marker { position: relative; width: 25px; height: 34px; } .custom-content-marker img { width: 35px; height: 100%; } .custom-content-marker .close-btn { position: absolute; top: -6px; right: -8px; width: 15px; height: 15px; font-size: 12px; background: #ccc; border-radius: 50%; color: #fff; text-align: center; line-height: 15px; box-shadow: -1px 1px 1px rgba(10, 10, 10, .2); } .custom-content-marker .close-btn:hover { background: #666; } </style>
HTML
1 | <div id= 'container' ></div> |
JS加载地图
<script type="text/javascript"> $(function () { //此处为加载瓦片图片 var grayscaleLayer = new L.TileLayer('bmap_offline_demo/tiles/{z}/{x}/{y}.png', { noWrap: false }); //创建地图 map = new L.map('container', { minZoom: 1, maxZoom: 20, tileSize: 256, center: [34.742125, 118.020341], zoom: 18, zoomDelta: 0.3,//点击+-按钮的放缩刻度尺度,默认值1 zoomSnap: 0.3,//地图能放缩的zoom的最小刻度尺度,默认值1 fullscreenControl: false,//全屏控件,不显示 zoomControl: false,//放大缩小控件,不显示 attributionControl: false,//右下角属性控件,不显示 contiunousWorld: true }); map.addLayer(grayscaleLayer); //创建自定义marker,此处marker显示的是图标 var icon1 =new L.divIcon({ html: '<div class="custom-content-marker"><img src="img/mapicon/AR.png"></div>', className: 'i1',//如果有多个样式这个名称必须要加 }); var marker1 = new L.marker([纬度, 经度], { icon: icon1 }); var markerss = []; //如果有多个那么就push多个//markerss.push(marker2);markerss.push(marker3);.。。。。。 markerss.push(marker1); var citiesLayer = new L.layerGroup(markerss); map.addLayer(citiesLayer);
/点击事件 marker1.on('click',e=>{ alert(点击); }) }) </script>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· 2 本地部署DeepSeek模型构建本地知识库+联网搜索详细步骤