如何从地图上的标记中删除背景？

Question

如何去除标记中的蓝色背景？
使用默认图标和自定义图标（具有透明背景的 png）会发生这种情况。

我做错了什么吗？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css">
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
    <title>Map with OpenStreetMap</title>
    <style>
        #map {
            height: 400px;
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
    <script>
        var map = L.map('map').setView([45.418393, 10.969487], 13); // Replace with your default map center

        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 19,
            attribution: '© OpenStreetMap contributors'
        }).addTo(map);

        var marker = L.marker([45.410051797705904, 10.90330758434609]).addTo(map);

    </script>
</body>
</html>

我尝试了自定义图标，但仍然遇到同样的问题：

var LogoPin = L.icon({
    backgroundColor: 'transparent',
    iconUrl: './pin.png',
    shadowUrl: './shad.png',
    iconSize:     [30, 47], // size of the icon [38,95]
    shadowSize:   [50, 64], // size of the shadow*/
    iconAnchor:   [22, 94], // point of the icon which will correspond to marker's location
    shadowAnchor: [4, 62],  // the same for the shadow*/
    popupAnchor:  [-3, -76] // point from which the popup should open relative to the iconAnchor
    
});

L.marker([place.lat, place.lng], {icon: LogoPin}).addTo(map);

Answer 1

发现你正在使用pico.css（我相信适合你的特定目的）

供您参考，pico css 会将背景和边框颜色应用于许多元素，并且它会影响您的标记背景和边框

对于您的情况，如果您想删除标记周围的蓝色，方法之一是在 pico.css 下方添加以下内容：

<style>

[role=button],button,input[type=button],input[type=reset],input[type=submit]{
    --background-color:none;
    --border-color:none;
}

[role=button]:is([aria-current],:hover,:active,:focus),button:is([aria-current],:hover,:active,:focus),input[type=button]:is([aria-current],:hover,:active,:focus),input[type=reset]:is([aria-current],:hover,:active,:focus),input[type=submit]:is([aria-current],:hover,:active,:focus){
    --background-color:none;
    --border-color:none;
}

</style>

另一方面，如果您不需要阴影，请将其注释掉：

//          shadowUrl: '',
//          shadowSize:   [50, 64],
//          shadowAnchor: [4, 62],

因此整个代码（标记周围没有背景颜色）但保留 pico.css 的使用将是

<!DOCTYPE html>
<html lang="en">
<head>
    <base target="_top">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <title>Quick Start - Leaflet</title>
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css">
    <link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" />

<style>

[role=button],button,input[type=button],input[type=reset],input[type=submit]{
    --background-color:none;
    --border-color:none;
}

[role=button]:is([aria-current],:hover,:active,:focus),button:is([aria-current],:hover,:active,:focus),input[type=button]:is([aria-current],:hover,:active,:focus),input[type=reset]:is([aria-current],:hover,:active,:focus),input[type=submit]:is([aria-current],:hover,:active,:focus){
    --background-color:none;
    --border-color:none;
}

</style>
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>

    <style>
        html, body {
            height: 100%;
            margin: 0;
        }
        .leaflet-container {
            height: 400px;
            width: 600px;
            max-width: 100%;
            max-height: 100%;
        }
    </style>

    
</head>
<body>



<div id="map" style="width: 600px; height: 400px;"></div>
<script>

    const map = L.map('map').setView([51.505, -0.09], 13);

    const tiles = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 19,
        attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
    }).addTo(map);

//  const marker = L.marker([51.5, -0.09]).addTo(map);


const LeafIcon = L.Icon.extend({
        options: {
//          shadowUrl: '',
            iconSize:     [32, 32],
//          shadowSize:   [50, 64],
            iconAnchor:   [22, 94],
//          shadowAnchor: [4, 62],
            popupAnchor:  [-3, -76]
        }
    });

    const greenIcon = new LeafIcon({iconUrl: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/library_maps.png'});

    const mGreen = L.marker([51.5, -0.09], {icon: greenIcon}).bindPopup('StackOverflow.com is good').addTo(map);

</script>

</body>
</html>

上述代码的结果

如何从地图上的标记中删除背景？

问题描述投票：0回答：1

1个回答

最新问题

如何从地图上的标记中删除背景？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1