从标记中删除蓝色背景

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

对于OpenStreetMap，使用自定义标记（yourown.png）的方法之一是使用OpenLayers.icon指定标记png（透明），然后将此图标用作OpenLayers.Marker，如下：

var size = new OpenLayers.Size(32,32);
var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
var icon = new OpenLayers.Icon("https://developers.google.com/maps/documentation/javascript/examples/full/images/library_maps.png", size, offset);

var markers = new OpenLayers.Layer.Markers("Markers")

map.addLayer(markers);
markers.addMarker(new OpenLayers.Marker(position, icon));

所以你可以尝试以下（完全工作的代码）

<div id="Map" style="height: 250px; width: 400px" ></div>
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<!--<script src="js/osm/api/OpenLayers.js"></script>-->
<script>
    var lat = 55.676098;
    var lon = 12.568337;
    var zoom = 11;

    var fromProjection = new OpenLayers.Projection("EPSG:4326");   // Transform from WGS 1984
    var toProjection = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection
    var position = new OpenLayers.LonLat(lon, lat).transform(fromProjection, toProjection);

    map = new OpenLayers.Map("Map");
    var mapnik = new OpenLayers.Layer.OSM();
    map.addLayer(mapnik);

//////////////////

var size = new OpenLayers.Size(32,32);
var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
var icon = new OpenLayers.Icon("https://developers.google.com/maps/documentation/javascript/examples/full/images/library_maps.png", size, offset);

var markers = new OpenLayers.Layer.Markers("Markers")

map.addLayer(markers);
markers.addMarker(new OpenLayers.Marker(position, icon));

////////////////// disable default marker

//    var markers = new OpenLayers.Layer.Markers("Markers");//("Images/Icons/map-marker.png");
//    map.addLayer(markers);
//    markers.addMarker(new OpenLayers.Marker(position));
//////////////// END


    map.setCenter(position, zoom);
</script>

从标记中删除蓝色背景

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

1个回答

最新问题

从标记中删除蓝色背景

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

1个回答

最新问题

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