随笔 - 89  文章 - 0  评论 - 2  阅读 - 11万 

官网: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>
复制代码

 

  

posted on   我的梦想是开个小店  阅读(2318)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· 2 本地部署DeepSeek模型构建本地知识库+联网搜索详细步骤
点击右上角即可分享
微信分享提示