将鼠标悬停在GeoJson图层上的圆圈后,弹出窗口显示

时间:2014-11-07 07:30:40

标签: javascript leaflet

我使用外部GeoJson文件(数据)用点填充地图。我想要做的是将鼠标悬停在一个显示弹出窗口并跟随鼠标的圆圈上。我还想为不使用鼠标的人提供点击选项。我尝试了不同的步骤,但没有一个与我的工作有关:

//BUILD MAP
var layer = new L.StamenTileLayer("toner-lite");

var map = new L.Map("map", {
    center: new L.LatLng(28.100, -83.600),
    zoom: 6
});

map.addLayer(layer);

//Load GeoJson
L.geoJson (data, {
    onEachFeature: function (feature, layer) {
        layer.bindPopup(feature.properties.description + " " + feature.properties.name);    
    },

    pointToLayer: function(feature, latlng) {
        return new L.CircleMarker(latlng, {
        radius: 8,
        fillColor: "red",
        color: "#000",
        weight: 2,
        fillOpacity: 0.6,

        });
    }

}).addTo(map);

var circle = L.circleMarker([28.100, -83.600], 5000).addTo(map);

circle.setStyle({
        color: 'red',
        fillColor: 'red',
        fillOpacity: 0.5,
});

1 个答案:

答案 0 :(得分:1)

试试这个:

marker.bindPopup("Popup content");
        marker.on('mouseover', function (e) {
            this.openPopup();
        });
        marker.on('mouseout', function (e) {
            this.closePopup();
        });