Django-admin中添加增加一个地图选择器
实现经纬度坐标的显示和坐标自动拾取
增加一个地图选择器
一、在admin表单中使用JavaScript来实现地图选择器的功能
要在Django Admin中自定义JavaScript,你需要在admin.py
中为你的模型添加一个ModelAdmin
类,并且在这个类中指定Media
内部类来引入你的JavaScript文件。
- 在
settings.py
中添加STATICFILES_DIRS
,并添加以下代码:
STATIC_URL = '/static/'
# 添加
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static'),
]
- 在项目根目录下创建
static
文件夹,并创建leaflet_map.js
文件。在这个文件中使用Leaflet的API来创建一个地图,并且监听地图的click事件来更新经度和纬度字段。
window.onload = function() {
var latField = document.getElementById('id_纬度');
var lonField = document.getElementById('id_经度');
var mapCenter = [39.9, 116.4];
var map = L.map('map').setView(mapCenter, 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors',
maxZoom: 18,
}).addTo(map);
if (latField.value && lonField.value) {
var marker = L.marker([latField.value, lonField.value]).addTo(map);
map.panTo([latField.value, lonField.value]);
}
function onMapClick(e) {
if (marker) {
map.removeLayer(marker);
}
marker = L.marker(e.latlng).addTo(map);
latField.value = e.latlng.lat;
lonField.value = e.latlng.lng;
}
map.on('click', onMapClick);
}
- 在你的
admin.py
中添加ModelAdmin
类来引入你的JavaScript文件:
from django.contrib import admin
from .models import test1, test2
class test1Admin(admin.ModelAdmin):
class Media:
js = ('leaflet_map.js',)
class test2Admin(admin.ModelAdmin):
class Media:
js = ('leaflet_map.js',)
admin.site.register(test1, test1Admin)
admin.site.register(test2, test2Admin)
- admin模板中添加一个地图容器。创建一个新的admin模板,例如
admin/change_form.html
,然后在这个模板中添加一个地图容器:
修改 settings.py 文件,将templates
目录添加到DIRS
列表中:
TEMPLATES = [
{
...
'DIRS': [os.path.join(BASE_DIR, 'templates')],
...
},
]
项目根目录下的templates文件夹中创建一个admin目录,并在这个admin目录下创建你的change_form.html文件。所以你的文件结构可能是这样的:
/myproject #根目录
/templates
/admin
change_form.html
- 在change_form.html文件中添加一个地图容器,并引入你的JavaScript文件:
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
{% extends "admin/change_form.html" %}
{% block after_field_sets %}
<div id="map" style="height: 400px;"></div>
{% endblock %}
- 然后在你的
ModelAdmin
类中指定这个模板:
修改admin.py
文件,将change_form_template
模板的路径指定为你的自定义模板路径:
class test1Admin(admin.ModelAdmin):
change_form_template = 'admin/change_form.html'
class Media:
js = ('leaflet_map.js',)
class test2Admin(admin.ModelAdmin):
change_form_template = 'admin/change_form.html'
class Media:
js = ('leaflet_map.js',)
注意,你需要确保你的JavaScript文件和你的模板文件的路径是正确的。我在这里使用的是相对路径,你可能需要根据你的项目结构来调整这些路径。你还需要在你的项目设置中添加leaflet的静态文件路径。