leaflet入门（一）示例

代码示例：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
        #mapDiv {
            /*必须指定高度*/
            height: 900px;
        }
    </style>
    <!--leaflet样式文件-->
    <link rel="stylesheet" href="./js/lib/leaflet/leaflet.css" />
    <!--leaflet核心JS文件-->

    <script type="text/javascript" src="./js/lib/leaflet/leaflet.js"></script>
    <script type="text/javascript" src="./js/jquery-3.2.1.min.js"></script>
    <script>

    </script>

</head>
<body>
    <div id="mapDiv">
    </div>

    <!--脚本必须放在尾部-->
    <script>
        var map = L.map('mapDiv').setView([51.505, -0.09], 13);
        L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="http://osm.org/copyright">中科院数字与遥感研究所</a> contributors'
        }).addTo(map);
        var marker = L.marker([51.508, -0.09]).addTo(map);
        var circle = L.circle([51.508, -0.11], {
            color: 'red',
            fillColor: '#f03',
            fillOpacity: 0.5,
            radius: 500
        }).addTo(map);
        circle.bindPopup("I am a circle.");
        var polygon = L.polygon([
    [51.509, -0.08],
    [51.503, -0.06],
    [51.51, -0.047]
        ]).addTo(map);

        var popup = L.popup();

        function onMapClick(e) {
            popup
                .setLatLng(e.latlng)
                .setContent("You clicked the map at " + e.latlng.toString())
                .openOn(map);
        }

        map.on('click', onMapClick);

    </script>

</body>
</html>

相关阅读:
剑指Offer 07 重建二叉树
剑指Offer 06 从尾到头打印链表
剑指Offer 05 替换空格
剑指Offer 04 二维数组中的查找
剑指Offer 03 数组中重复的数字
leetcode518
leetcode474
leetcode376
leetcode646
leetcode213

原文地址：https://www.cnblogs.com/tinaluo/p/7240712.html