popup图片 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Display a popup</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
    <link href="https://api.mapbox.com/mapbox-gl-js/v2.8.2/mapbox-gl.css" rel="stylesheet">
    <script src="https://api.mapbox.com/mapbox-gl-js/v2.8.2/mapbox-gl.js"></script>
    <style>
        body { margin: 0; padding: 0; }
        #map { position: absolute; top: 0; bottom: 0; width: 100%; }
        .tyico{
            height: 32px;
        }
        .tyico .mapboxgl-popup-close-button{
            display: none;
        }
        .tyico .mapboxgl-popup-content{
            background-color: transparent;
            padding: 0px;
            box-shadow:unset;
        }
        .tyico .mapboxgl-popup-tip{
            display: none;
        }
        .tyico img{
            animation:fadenum 0.5s infinite;
        }
        @keyframes fadenum {

            100% {
                transform: rotate(-360deg);
            }
        }
    </style>
</head>
<body>
<div id="map"></div>
<script>
    // TO MAKE THE MAP APPEAR YOU MUST
    // ADD YOUR ACCESS TOKEN FROM
    // https://account.mapbox.com
    mapboxgl.accessToken = 'pk.eyJ1IjoiN2NoaWFraSIsImEiOiJjbDFjeG5jMGcwMGF3M3BvenA5YnRybTl2In0.gepyWctI_95d5KUZs_GgsA';
    const map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/streets-v11',
        center: [-96, 37.8],
        zoom: 3
    });

    const popup = new mapboxgl.Popup({ closeOnClick: false ,className: 'tyico',anchor:'left'})
        .setLngLat([-96, 37.8])
        .setHTML('<img src="tyico.png">')
        .addTo(map);
</script>

</body>
</html>
posted @ 2022-05-31 10:54  小林222  阅读(39)  评论(0)    收藏  举报