Question

我有以下幾點：

var myLatLng = new L.LatLng(lat, lng); 
var labelIcon = L.divIcon(
    { 
     iconSize: [0, 0], 
     html: "<div style='font-family:arial; margin-left:0px; margin-top:0px; font-size:" + fontSize + "px;'>" + labelText + "</div>" 
    }); 
var myMarker = L.marker(myLatLng, { icon: labelIcon, riseOnHover: false, draggable: true, ID: labelID }); 

當它出現在我的地圖，我得到的文本在div出現，但再有就是這個小點是由我認爲的尺寸爲0,0的圖標造成的。我試圖設置div的不透明度，但不影響圖標不透明度。有沒有辦法消除或隱藏標記留下的「點」？

Answer 1

iconSize對創建divIcon不是必需的。您可以改爲傳入className，然後通過CSS設置大小。這是一個鏈接到Leaflet的文檔detailing the options available.這是一個代碼片段。 labels只是我用geojson.io創建的geoJSON。我將geoJSON保存到一個變量中，後來我將它迭代並添加到map，這是一個Leaflet地圖。

var labels = { 
"type": "FeatureCollection", 
"features": [ 
     { 
    "type": "Feature", 
    "properties": { 
     "name": "Juneau" 
    }, 
    "geometry": { 
     "type": "Point", 
     "coordinates": [ 
     -134.42115783691406, 
     58.30209338988363 
     ] 
    } 
    }, 
    { 
    "type": "Feature", 
    "properties": { 
     "name": "Fort Yukon" 
    }, 
    "geometry": { 
     "type": "Point", 
     "coordinates": [ 
     -145.27410507202148, 
     66.5648589947054 
     ] 
    } 
    } 
}; 

labels.features.forEach(function(feature) { 
    return L.marker(
    [feature.geometry.coordinates[1], feature.geometry.coordinates[0]], { 
    icon: L.divIcon({ 
     className: 'label', 
     html: feature.properties.name 
    }) 
    }).addTo(map); 
}); 

此外，這裏是我最近使用的樣式化地圖的CSS。您需要將光標更改爲inherit，以便它不會更改爲指針。 text-shadow給文本一個淺黑色的輪廓，使地圖上的標籤更清晰可見。

.label { 
    font-family: 'IM Fell DW Pica', serif; 
    color: #fec623; 
    font-size: 150%; 
    line-height: 20px; 
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; 
    cursor: inherit; 
}