leaflet快速入门指南

houxiaohang 2021-08-04 原文

首先需要在头部引入leaflet.js及样式文件

创建id为map的div用来放置地图

设置容器样式：

做好以上准备工作，就可以真正开始开发在线地图啦

   // 1 初始化地图，设置地图坐标及缩放级别
    var map = L.map(\'map\').setView([51.505, -0.09], 13);

    //2 添加瓦片层（tile layer）(tile,意为瓷砖 瓦片，就像在地板上面铺了一层瓷砖)
    //这里引用osm的在线地图，也可以使用openstreetmap上面的数据及切片工具制作离线地图
    L.tileLayer(\'http://{s}.tile.osm.org/{z}/{x}/{y}.png\', {
        attribution: \'&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors\'
    }).addTo(map);

    //3  添加标注、圆形、多边形
    // 添加标注（marker）
    var marker = L.marker([51.5, -0.09]).addTo(map);

    // 添加圆形
    var circle = L.circle([51.508, -0.11], {
            color: \'red\',
            fillColor: \'#f03\',
            fillOpacity: 0.5,
            radius: 500
    }).addTo(map);

    // 添加多边形(ploygon)
    var polygon = L.polygon([
            [51.509, -0.08],
            [51.503, -0.06],
            [51.51, -0.047]
    ]).addTo(map);

//4 为覆盖物标注、圆、多边形添加弹出气泡(popups)

    marker.bindPopup("<b>Hello world!</b><br>I am a popup.").openPopup();
    circle.bindPopup("I am a circle.");
    polygon.bindPopup("I am a polygon.");
    //首先使用bindPopup将要显示的信息内容绑定在图形上，使用openPopup()显示出气泡

    //或者你也可以直接使用popups将气泡作为一个层
    // var popup = L.popup()
                // .setLatLng([51.5, -0.09])
                // .setContent("I am a standalone popup.")
                // .openOn(map);

// 5 处理事件
    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);