Question

我有一张leaflet.js等值区域地图，几乎与教程地图

完全相同

http://leafletjs.com/examples/choropleth.html

我希望能够在地图中制作标签并显示状态信息。

我尝试使用隐藏链接伪装它并在图层上触发，但没有取得任何成功。

知道最好的方法是什么？

Answer 1

使用此代码，我能够将鼠标悬停模拟为（假设变量'p'是表示状态的路径元素之一）http://leafletjs.com/examples/choropleth-example.html

getScrollOffset = function (element) {
    if (!element.nodeType && element.document) {
        element = element.document;
    }
    if (element.nodeType === 9) {
        var docElement = element.documentElement,
            body = element.body;
        return {
            left: (docElement && docElement.scrollLeft || body && body.scrollLeft || 0),
            top: (docElement && docElement.scrollTop || body && body.scrollTop || 0)
        };
    }
    return {
        left: element.scrollLeft,
        top: element.scrollTop
    };
};

getElementCoordinates = function (element) {
    var doc = element.ownerDocument,
        scrollOffset = getScrollOffset(doc),
        xOffset = scrollOffset.left,
        yOffset = scrollOffset.top,
        coords = element.getBoundingClientRect();
    return {
        top: coords.top + yOffset,
        right: coords.right + xOffset,
        bottom: coords.bottom + yOffset,
        left: coords.left + xOffset,
        width: coords.right - coords.left,
        height: coords.bottom - coords.top
    };
};
var p = document.getElementsByTagName('path')[50];
var coords = getElementCoordinates(p);
var evt = document.createEvent("MouseEvents");
evt.initMouseEvent("mouseover", true, true, window,
0, coords.left/* screenX */, coords.top/* screen Y */, 0 /* clientX */, 0/* clientY */, false, false, false, false, 0, document.body);
p.dispatchEvent(evt);

将键盘控件添加到Leaflet js Choropleth地图

1 个答案: