leaflet js：如何爲L.CircleMarker創建工具提示？

Question

我想知道是否有方法來設置L.CircleMarker的工具提示？

var geojsonLayerVessel = new L.GeoJSON(null, { 
    pointToLayer: function (latlng){ 
    return new L.CircleMarker(latlng, { 
     radius: 5, 
     fillColor: "#ff7800", 
     color: "#000", 
     weight: 1, 
     opacity: 1, 
     fillOpacity: 0.8, 
     title: "test" 
    }); 
} 
}); 

嘗試了上面的代碼，但它不工作。

Answer 1

對於GeoJSON圖層，您可以按照this example收聽'featureparse'事件來綁定彈出窗口。沿着這些線：

var geoJsonLayer = new L.GeoJSON(null,{ 
pointToLayer: function (latlng){ 
return new L.CircleMarker(latlng, { 
    radius: 5, 
    fillColor: "#ff7800", 
    color: "#000", 
    weight: 1, 
    opacity: 1, 
    fillOpacity: 0.8, 
}); 

geoJsonLayer.on('featureparse', function(e){ 
//Now you can bind popups to features in the layer, and you have access to 
//attributes on the GeoJSON object through e.properties: 
e.layer.bindPopup('Hello! ' + e.properties.someProperty); 
}); 

//now you add some some data to your layer and add it to the map.... 
geoJsonLayer.addGeoJSON(someGeoJson); 
map.addLayer(geoJsonLayer); 

希望這會有所幫助！

Answer 2

這不適用於CircleMarkers。 但是，您可以創建一個小點DivIcon並使其具有圓角的樣式。 DivIcon s支持'title'選項。

http://jsfiddle.net/GZHJX/

提供儘可能pointToLayer功能：

function (latlng){ 
    return L.marker(latlng, 
        { icon : L.divIcon({ className : 'circle', 
             iconSize : [ 5, 5 ]}), 
         title: 'test'}); 
} 

而div的樣式：

div.circle { 
    background-color: #ff7800; 
    border-color: black; 
    border-radius: 3px; 
    border-style: solid; 
    border-width: 1px; 
    width:5px; 
    height:5px; 
}