leaflet入门（一）示例

最新推荐文章于 2025-07-28 21:07:05 发布

weixin_34054931

最新推荐文章于 2025-07-28 21:07:05 发布

阅读量700

点赞数

CC 4.0 BY-SA版权

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/tinaluo/p/7240712.html

本文介绍了一个使用Leaflet JavaScript库创建交互式地图的应用实例。该示例展示了如何设置地图的基本视图、添加瓦片图层、放置标记、绘制圆形区域、创建多边形并实现点击事件来显示坐标。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码示例：

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