листовка 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 вы можете прослушивать событие «featureparse» для привязки всплывающих окон, как и к this example. Что-то в этих строках:

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 с поддержкой '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; 
}