5

geoJSONを使用して、マップ上にいくつかのポイントをプロットしています。ポイントをクリックすると、マップがそのポイントにズームし、別のdivの情報を取得します。マウスオーバーイベントにポップアップを表示すると、クリック機能が機能しなくなります。

これが私のクリック機能です：

function fillInfo(e) {
        var layer = e.target; 

        document.getElementById('infoBox').innerHTML = '<h2>' + layer.feature.properties.name + '</h2>' + '<h3>' +  layer.feature.properties.address + '</h3></p>'
        }
        //Variable to set zoom level on click
        var southLat = layer.feature.geometry.coordinates[0] + .022438;
        var southLong = layer.feature.geometry.coordinates[1] - .003235;

        var northLat = layer.feature.geometry.coordinates[0] - .022438;
        var northLong = layer.feature.geometry.coordinates[1] + .003235;

        map.fitBounds([[southLong, southLat], [northLong, northLat]]);


    }​

これが私のマウスオーバー機能です：

        function highlightFeature(e) {
        var layer = e.target; 

        layer.bindPopup(layer.feature.properties.name)
            .openPopup();


        layer.setStyle({
            weight: 5,
            color: '#666',
            dashArray: '',
            fillOpacity: 0.7
        });



        if (!L.Browser.ie && !L.Browser.opera) {
            layer.bringToFront();
        }

    }

そしてここで私はそれらを呼びます：

    function onEachFeature(feature, layer) {
        layer.on({
            click: fillInfo,
            mouseover: highlightFeature,
            mouseout: resetHighlight
        });
    }

これにより、ロールオーバー時にポップアップが正常に機能しますが、ポイントはクリックイベントに応答しなくなります。

4

1 に答える 1

2

ポップアップにはオフセットプロパティがあり、デフォルトはに設定されている[0,6]ため、ポップアップはポイントをカバーし（白い下向きの矢印を含むノードは矢印よりも大きい）、ポイントをクリックすることはできません。 。

ポップアップのoffset-optionを設定します。

layer.bindPopup(layer.feature.properties.name,{offset:new L.Point(0,0)})
 .openPopup();

L.Pointに提供される2番目の引数は、重要なy座標です。この引数を減らすと、ポップアップが上に移動します。

于 2013-01-03T19:45:22.947 に答える