使用Django rest framework搭建 openapi规范api服务端记录（二）：Django-admin中添加增加一个地图选择器

本文链接：https://blog.csdn.net/fanpink/article/details/135877904

本文介绍了如何在DjangoAdmin界面中使用JavaScript和LeafletAPI创建一个地图选择器，实现实时经纬度显示与拾取，以及如何配置ModelAdmin、Media和模板以集成此功能。

摘要由CSDN通过智能技术生成

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 &copy; <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',)