使用leaflet 制作离线地图

https://github.com/dxxzst/OfflineMap

<!DOCTYPE html>
<html>

<head>
    <title>Leaflet map</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="dist/leaflet.css"/>
    <script src="dist/leaflet.js"></script>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>

<body>
<div id="mainmap" style="min-height: 900px"></div>
</body>

</html>

<script>
    $(function () {
        var mapcon = document.documentElement.clientHeight - 16 + 'px';
        $("#mainmap").css('height', mapcon);
    });
    $(window).resize(function () {
        var rmapcon = document.documentElement.clientHeight - 16 + 'px';
        $("#mainmap").css('height', rmapcon);
    });

    (function () {
        $("#mainmap").empty();

        //设置视图最大为6最小为15
        var url_normal = 'http://localhost:3001/788865972/{z}/{x}/{y}';
        var glayer_normal = new L.TileLayer(url_normal, {minZoom: 6, maxZoom: 15, attribution: '普通地图'});

        //当前的经纬度，使用的是谷歌经纬度
        var latlng = new L.LatLng(25.201679441241843, 119.50429916381836);

        //初始化地图信息
        // var crs =  L.CRS.NonEarthCRS({
        // 	bounds: L.bounds([48.4, -7668.25],[8958.85, -55.58]),
        // 	origin: L.point(48.4,-55.58)
        // });
        // var bounds = L.latLngBounds([-0, -1000],[0, 1000]); 设定边界值
        var _map = new L.Map('mainmap', {
        	center: latlng,		//地图中心
			zoom: 14,			//缩放比例
			attributionControl: false,	//右下角属性控件，不显示
			zoomControl: false,//放大缩小控件，不显示
			fullscreenControl: false,//全屏控件，不显示
			// layers: [glayer_normal]
        });
		_map.addLayer(glayer_normal);

		//创建地标,系统默认
		var markers=[];
		var marker1 =L.marker([25.201679441241843, 119.50429916381836]);

		//自定义的circleMarker
		var marker2 = L.circleMarker([25.188631718174328,119.51082229614258], {
			stroke: true,
			color: '#aaaaaa',
			weight: 1,
			opacity: 1,
			fillColor: '#00e400',
			fillOpacity: 1,
			radius: 10
		});

		//用html的div来创建icon，但是有缺陷
		var icon3 = L.divIcon({
			html: "<div style='width: 15px;height:15px;border-radius: 50%;background-color:rebeccapurple ;'></div>",
			iconAnchor: [1, 1]});
		var marker3 =L.marker([25.200436861178975,119.4960594177246], { icon: icon3 });

		//用html的div的样式来创建marker的icon，注意需要加className属性，否则会出现marker1的问题
		var icon4 = L.divIcon({
			html: "<div style='width:24px;height:24px;border-radius:4px;background-color:green ;'></div>",
			className: 'ss',});
		var marker4 =L.marker([25.192981114513803,119.50395584106444], { icon: icon4 });

		markers.push(marker1);
		markers.push(marker2);
		markers.push(marker3);
		markers.push(marker4);

		var citiesLayer = L.layerGroup(markers);

		_map.addLayer(citiesLayer);

        // L.layers({
        // 	"普通地图": glayer_normal,
        // }).addTo(_map);

        //右键,打印坐标
        _map.on('contextmenu', function (e) {
            console.info("坐标：", e.latlng.lat + ',' + e.latlng.lng);
        });

    })();

</script>
来源：oschina
链接：https://my.oschina.net/u/2552286/blog/3194889
标签
leaflet