master

分支 (1)

管理

管理

master

leaflet-book
/
在页面加载时打开所有弹出窗口popup2.html

<!DOCTYPE html>
<html>

<head>
    <title>Leaflet1</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"
          integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
          crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"
            integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
            crossorigin=""></script>


    <!--<script src="https://cdnjs.com/libraries/leaflet-tilelayer-geojson"></script>-->
    <style TYPE="text/css">
        body {
            margin: 0px;
            padding: 0px;
        }

        /**
         * 单独设置mapid为100%不显示，可能float坍塌
         */

        html,
        body,
        #mapDiv {
            height: 100%;
            width: 100%;
        }
    </style>
</head>

<body>
<div id="mapDiv">
</div>
</body>
<script>
    //地图地址
    var url = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw';
    var attr = ' Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="http://cartodb.com/attributions">CartoDB</a>';


    var leafletMap = L.map('mapDiv').setView([51.505, -0.09], 13);
    //图层
    L.tileLayer(url, {
        maxZoom: 18,
        attribution: attr,
        id: 'mapbox.streets'
    }).addTo(leafletMap);

    /**
     * 使用了{autoClose:false}
     */

    L.marker([51.5, -0.09]).addTo(leafletMap)
        .bindPopup("<b>Hello world!</b><br />I am a popup.",{autoClose:false}).openPopup();
    L.marker([51.5, -0.08]).addTo(leafletMap)
        .bindPopup("<b>Hello world!</b><br />I am a popup.",{autoClose:false}).openPopup();


</script>

</html>