添加传单尺插件失败

问题描述 投票:0回答:1

我总是得到:js:Uncaught ReferenceError:地图未定义

添加Leaflet-Ruler插件

    m.get_root().header.add_child(folium.CssLink("https://unpkg.com/[email protected]/dist/leaflet.css"))
    m.get_root().header.add_child(folium.CssLink("https://cdn.rawgit.com/gokertanrisever/leaflet-ruler/master/src/leaflet-ruler.css"))
    m.get_root().html.add_child(folium.JavascriptLink("https://unpkg.com/[email protected]/dist/leaflet.js"))
    m.get_root().html.add_child(folium.JavascriptLink("https://cdn.rawgit.com/gokertanrisever/leaflet-ruler/master/src/leaflet-ruler.js"))
    my_js = '''
    L.control.ruler().addTo(map);
    '''
    m.get_root().script.add_child(folium.Element(my_js))

我尝试将此插件添加到 python 中的 folium 地图中,但总是出现错误

javascript python leaflet folium
1个回答
0
投票

尝试将插件直接添加到我的代码中是错误的,但最好将插件添加到 folium 库插件中,因此我将文件夹中的一个简单插件 .py 文件进行编辑,然后将其放入folium 内的 plugins 文件夹并编辑了 init.py,以便我可以调用 Ruler 函数来添加插件。然后 github 上的 folium 社区的 Hans 指导我做到了这一点,非常感谢他

from branca.element import MacroElement

从 jinja2 导入模板

从 folium.elements 导入 JSCSSMixin 从 folium.utilities 导入 parse_options

类标尺(JSCSSMixin,MacroElement): ”“” 在地图上添加标尺按钮来测量方位和距离。

See https://https://github.com/gokertanrisever/leaflet-ruler for more information.
"""

_template = Template(
    """
    {% macro script(this, kwargs) %}
        L.control.ruler(
            {{ this.options|tojson }}
        ).addTo({{this._parent.get_name()}});
    {% endmacro %}
    """
)  # noqa

default_js = [
    (
        "Control.Ruler.js",
        "https://cdn.rawgit.com/gokertanrisever/leaflet-ruler/master/src/leaflet-ruler.js",
    )
]
default_css = [
    (
        "Control.Ruler.css",
        "https://cdn.rawgit.com/gokertanrisever/leaflet-ruler/master/src/leaflet-ruler.css",
    )
]

def __init__(self, options=None):
    super().__init__()
    self.options = options or {
        "position": "topright",
        "lengthUnit": {
            "factor": 0.539956803,  # from km to nm
            "display": "nm",
            "decimal": 2,
            "label": 'Distance:',
        },
    }
© www.soinside.com 2019 - 2024. All rights reserved.