我遵循了此文档https://github.com/makinacorpus/django-leaflet/blob/master/docs/widget.rst,我正在尝试在管理网站上将Leaflet-Control-geocoder添加到Leaflet小部件。感谢您阅读我的问题,对不起我的英语不好。
我的代码:
admin / 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 %}
setting.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,
},
},
}
结果:不变
我已经通过遵循this post解决了我的问题,>
我的代码:
setting.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);
});