0

我遵循了这个文档https://github.com/makinacorpus/django-leaflet/blob/master/docs/widget.rst，我正在尝试将leaflet-control-geocoder 添加到管理站点上的Leaflet 小部件。感谢您阅读我的问题，很抱歉我的英语不好。

我的代码：

管理员/change_form.html

{% extends "admin/change_form.html" %}
{% load i18n admin_urls static leaflet_tags %}

{% block stylesheets %}
{{ block.super }}
{% leaflet_css plugins="ALL" %}
<style>
/* Force leaflet controls underneath header (z-index 1000) and
   above leaflet tiles (z-index 400)*/
/*.leaflet-top{z-index:999;}*/
</style>

{% endblock %}

{% block javascripts %}
{{ block.super }}
{% leaflet_js plugins="ALL" %}

<script type="text/javascript">
    window.addEventListener("map:init", function (event) {
        var map = event.detail.map; // Get reference to map

        L.Control.geocoder(
            {
                collapsed: true,
                geocoder: L.Control.Geocoder.nominatim({
                    geocodingQueryParams: {countrycodes: 'VN'}
                })
            }
        ).addTo(map);
    });
</script>

{% endblock %}

设置.py

# leaflet Module
LEAFLET_CONFIG = {
    'DEFAULT_CENTER': (10.762622, 106.660172), #default center of your map
    'DEFAULT_ZOOM': 14, #default zoom level
    'MIN_ZOOM': 3,
    'MAX_ZOOM': 22,
    'SCALE': 'both',
    'ATTRIBUTION_PRIFIX': 'tekson', #attribution of your map
    'PLUGINS': {
        'forms': {
                'js': ['/static/leaflet_geocoder/geocoder.js'],
                'css': ['/static/leaflet_geocoder/geocoder.css'],
                'auto-include': True,
        },
    },
}

结果：没有任何变化

4

1 回答 1

0

我通过关注这篇文章解决了我的问题

我的代码：

设置.py

# leaflet Module
LEAFLET_CONFIG = {
    'DEFAULT_CENTER': (10.762622, 106.660172), #default center of your map
    'DEFAULT_ZOOM': 14, #default zoom level
    'MIN_ZOOM': 3,
    'MAX_ZOOM': 22,
    'SCALE': 'both',
    'ATTRIBUTION_PRIFIX': 'tekson', #attribution of your map
    'PLUGINS': {
        'forms': {
                'js': ['/static/leaflet_geocoder/geocoder.js', '/static/Leaflet_Coordinates/Leaflet.Coordinates-0.1.5.min.js', '/static/js_admin/leaflet_widget.js'],
                'css': ['/static/leaflet_geocoder/geocoder.css', '/static/Leaflet_Coordinates/Leaflet.Coordinates-0.1.5.css'],
        },
    },
}

Leaflet_widget.js

window.addEventListener("map:init", function (event) {
    var map = event.detail.map; // Get reference to map

    L.Control.geocoder(
        {
            collapsed: true,
            geocoder: L.Control.Geocoder.nominatim({
                geocodingQueryParams: {countrycodes: 'VN'}
            })
        }
    ).addTo(map);

    L.control.coordinates({
        position:"bottomleft", //optional default "bootomright"
        decimals:6, //optional default 4
        decimalSeperator:".", //optional default "."
        labelTemplateLat:"Latitude: {y}", //optional default "Lat: {y}"
        labelTemplateLng:"Longitude: {x}", //optional default "Lng: {x}"
        enableUserInput:true, //optional default true
        useDMS:false, //optional default false
        useLatLngOrder: true, //ordering of labels, default false-> lng-lat
        markerType: L.marker, //optional default L.marker
        markerProps: {}, //optional default {},
    }).addTo(map);
});
于 2020-05-12T16:45:45.373 回答