leaflet之设置标签和弹窗

最新推荐文章于 2024-08-24 09:06:42 发布

GEX0o0

最新推荐文章于 2024-08-24 09:06:42 发布

阅读量2.3k

点赞数

分类专栏：地图框架:leaflet

本文链接：https://blog.csdn.net/gexin0517/article/details/103769310

版权

地图框架:leaflet 专栏收录该内容

5 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css"
        integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
        crossorigin="" />
    <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"
        integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw=="
        crossorigin=""></script>
</head>
<style>
    #mapid {
        height: 700px;
    }
</style>

<body>
    <div id="mapid"></div>
</body>
<script>

    //这是地图的动画中心和缩放大小
    var mymap = L.map('mapid').setView([34.2182630000, 108.9641740000], 15);


    //添加地图设置
    //添加mapbox的在线地图
    var mapboxmap = 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=key';
    //添加osm在线地图
    var osmmap = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
    //添加高德地图
    var gaodemap = "http://webrd0{s}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8";



    //将地图设置为mapbox的底图
    L.tileLayer(mapboxmap,
        {
            maxZoom: 18,
            id: 'mapbox.satellite',
        }).addTo(mymap);


    //将底图设置为osm
    // L.tileLayer(osmmap,
    //     {
    //         maxZoom: 18,

    //     }).addTo(mymap);


    //将底图设置为高德地图
    // L.tileLayer(gaodemap,
    //     {
    //         subdomains:"1234"

    //     }).addTo(mymap);

    //设置标签
    // var marker = L.marker([34.2182630000, 108.9641740000]).addTo(mymap);
    // var circle = L.circle([34.2182630000, 108.9641740000], { color: 'red', fillColor: '#f03', fillOpacity: 0.5, radius: 500 }).addTo(mymap);

    //给标签绑定弹框事件
    // var popup = L.popup().setLatLng([34.2182630000, 108.9641740000]).setContent("I am a standalone popup.").openOn(mymap);
    // circle.bindPopup("我是⚪")

    //添加比例尺
    L.control.scale().addTo(mymap);


    //添加点击事件
    var popup = L.popup();
    function onMapClick(e) { popup.setLatLng(e.latlng).setContent("你在经纬度为" + e.latlng.toString() + "这个点上").openOn(mymap); } mymap.on('click', onMapClick);



</script>

</html>