Question

我使用Leaflet JS插件制作了地图，并且注意到我的地图标记图像在Chrome和IE11浏览器中质量较差。我正在使用Bootstrap 4设置标记弹出窗口的样式。我发现其他人在使用Chrome时遇到了问题，这使某些地图内容变得模糊，但是我没有发现标记质量问题。我正在使用Leaflet 1.4.0。我尝试了可拖动的修复程序，但是没有用。测试站点-TEST

Chrome上的图片： Marker image in chrome

Firefox上的图片 Marker image at Firefox

我的CSS：

#map {
  height: 680px;
}

.custom .leaflet-popup-tip,
.custom .leaflet-popup-content-wrapper {

background: rgba(255,255,255,1);    
}


.card-text {
    font-size: 11px;
    color: black !important;
    text-align: justify;

}
.card-title {
    color: rgb(9, 65, 139) !important;
    padding: 0 0 0 0;
}
.container{
    width:450px;
}
.imgar{

}
.imgar:hover{
     background:rgb(9, 65, 139, 0.8);
     padding: 5px 5px 5px 5px;
}
.card{
    border:0;
    background: rgba(255,255,255,1);
}
.imgc{
    width: 500px;
}
.cont{
    margin: 11px 11px;
}
.cont_1{
    padding: 15px 10px 10px 10px;
}
.leaflet-container a.leaflet-popup-close-button {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0px 0px 0 0;
    border: none;
    text-align: center;
    width: 18px;
    height: 14px;
    font: 16px/14px Tahoma, Verdana, sans-serif;
    color: red;
    text-decoration: none;
    font-weight: bold;
    background: transparent;
    }
.leaflet-container a.leaflet-popup-close-button:hover {
    color: #999;
    }
.thumbnail {
  float: left;
  position: relative;
  left: 0px;
  top: -30px;
  height: 150px;
  width:250px;
  -webkit-box-shadow: 7px 7px 35px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 7px 7px 35px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 7px 7px 35px 0px rgba(0, 0, 0, 0.75);
  overflow: hidden;
}
.container{
    margin: 20px 20px 20px 20px
}
.right {
  margin-left: 260px;
  margin-right: 50px;
}
.atstarpe{
    padding: 5px 5px 5px 5px;
}
.adrese{
    padding: 0 0 0 0px;
}

我的JavaScript：

function initmap(){
               // var map = L.map("map").setView([56.949500, 24.107220], 45);
                var map = L.map('map',{
                center: [56.94645, 24.12501],
                    zoom: 12,   
                    minZoom: 10,
                    });

               L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png').addTo(map);

                var greenIcon = L.icon({
    iconUrl: 'images/marker_9.png',
    shadowUrl: 'images/Marker_Gray(2).png',
    iconSize:     [40, 49], // size of the icon
    shadowSize:   [50, 59], // size of the shadow
    iconAnchor:   [20, 49], // point of the icon which will correspond to marker's location
    shadowAnchor: [13, 49],  // the same for the shadow
    popupAnchor:  [0, -42] // point from which the popup should open relative to the iconAnchor
});


    // specify popup options 
    var customOptions =
        {
        'maxWidth': '400',
        'className' : 'custom'
        }
        var customOptions_d =
        {
        'maxWidth': '800',
        'className' : 'custom'
        }
        var customOptions_3 =
        {
        'maxWidth': '350',
        'className' : 'custom'
        }

     var credctrl = L.controlCredits({
            image: "./images/logo.png",
            link: "http://www.rpbv.lv/",
            text: "Rīgas pilsētas ģērboņu karte<br/>(c) Rīgas pilsētas būvvalde",
        }).addTo(map);

        var markers = L.markerClusterGroup();

var addressPoints = [
  //Aizsaules iela 1a
/* longitude ,latitude , Nosaukums, icona, apraksts, bilde_1, bilde_2, adrese, gads*/
  [56.982236, 24.149027, "Kapsētas ieejas vārti ", greenIcon, "Sākotnējais nosaukums – Rīgas Jaunie kapi. 1925. gadā šajos kapos tika apglabātas dažādas personas, kuras nepiederēja pie nevienas draudzes. Oficiāli kapsētu atklāja 1929. gadā, kad tajā tika apglabāts latviešu dzejnieks Rainis (īstajā vārdā – Jānis Pliekšāns). Pēc tam kapsēta tika pārdēvēta par Raiņa kapiem.", "aizsaules_1a", "aizsaules_1a_2", "Aizsaules iela 1a", "1929. gads"],



for (var i = 0; i < addressPoints.length; i++) {
  var a = addressPoints[i];
  var title = a[2];
   var customPopup_3 = "<div class='cont'><div class='row'><div class='col-7'><div class='text-center'><h5 class='card-title text-center'>"+a[2]+"</h5><p class='card-text'>"+a[4]+"</p></div><br /><div class='adrese'><img src='https://cdn3.iconfinder.com/data/icons/map-markers-1/512/residence-512.png' width='20'><span class='glyphicon glyphicon-envelope card-text font-weight-bold'>"+a[7]+"    &nbsp </span><img src='https://cdn2.iconfinder.com/data/icons/picons-basic-1/57/basic1-011_calendar-512.png' width='20'><span class='glyphicon glyphicon-envelope card-text font-weight-bold'>"+a[8]+"</span></div> </div><div class='col-md-5'><div class='atstarpe'><a href='./images/"+a[5]+".JPG' target='_blank'><img class='d-block w-100 ' height='87' src='./images/"+a[5]+".JPG' alt='Pirmais slaids'></a>  </div><div class='atstarpe'><a href='./images/"+a[6]+".JPG' target='_blank'><img class='d-block w-100 'height='87' src='./images/"+a[6]+".JPG' alt='Pirmais slaids'></a></div></div></div></div>";
     var marker = L.marker(new L.LatLng(a[0], a[1]), {
    title: title,
    icon: a[3]
  });
  marker.bindPopup(customPopup_3,customOptions);
  markers.addLayer(marker);
}
    map.addLayer(markers);

}

Chrome和IE11中的地图标记图像质量较差

0 个答案: