leafletを鍛える。その14

1712 ワード
leaflet Plunker leaflet テキストリンク

概要

leafletを鍛えてみた。
マウスを追ってみた。

写真

サンプルコード

var map = L.map('map').setView([38.3748331, 139.9574997], 12);

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

var popup = new L.Popup({
    autoPan: false
});

map.on({
    mousemove: mousemove,
    mouseout: mouseout,
});

var closeTooltip;

function mousemove(e) {
    var layer = e.target;
    popup.setLatLng(e.latlng);
    popup.setContent('<div class="marker-title">on</div>' + e.latlng);
    if (!popup._map) popup.openOn(map);
    window.clearTimeout(closeTooltip);
    layer.setStyle({
        weight: 3,
        opacity: 0.3,
        fillOpacity: 0.9
    });
    if (!L.Browser.ie && !L.Browser.opera)
    {
        layer.bringToFront();
    }
}

function mouseout(e) {
    statesLayer.resetStyle(e.target);
    closeTooltip = window.setTimeout(function() {
        map.closePopup();
    }, 100);
}

成果物

以上。