通过【leaflet】 调用高德离线瓦片地图

官网：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

<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>