Django Admin中Google地图控件不读配置且样式异常求助

我在Django中定义了带位置字段的模型，配置django-map-widgets让Admin面板显示谷歌地图来设置位置，但目前地图能显示但读取不到配置参数，且样式异常简陋，相关配置及依赖如下：

原始配置参考 #

模型代码 #

from django.contrib.gis.db import models as gis_models

class Facility(models.Model):
    location = gis_models.PointField(srid=4326, verbose_name=_('location'), null=True, blank=True)

Admin配置代码（原错误版本） #

from django.contrib.gis.db import models as gis_models
from mapwidgets.widgets import GooglePointFieldWidget

@admin.register(Facility)
class FacilityAdmin(admin.ModelAdmin):
    formfield_overrides = {
        gis_models: {'widget': GooglePointFieldWidget},
        }

settings.py原配置（原错误版本） #

MAP_WIDGETS = {
    "GooglePointFieldWidget": (
        ("zoom", 12),
        ("mapCenterLocation", [ 50.8157, 9.1846]),
    ),
    "GOOGLE_MAP_API_KEY": env('GOOGLE_MAP_API_KEY')
}

依赖清单（requirements.txt） #

asgiref==3.5.2
async-timeout==4.0.2
branca==0.5.0
certifi==2022.9.24
chardet==5.0.0
charset-normalizer==2.1.1
click==8.1.3
colorama==0.4.6
Deprecated==1.2.13
Django==4.1.2
django-crispy-forms==1.14.0
django-environ==0.9.0
django-map-widgets==0.4.0
django-rq==2.5.1
folium==0.13.0
idna==3.4
Jinja2==3.1.2
lml==0.1.0
MarkupSafe==2.1.1
numpy==1.23.4
packaging==21.3
pandas==1.5.1
Pillow==9.2.0
postgis==1.0.4
psycopg2==2.9.4
pyexcel==0.7.0
pyexcel-io==0.6.6
pyparsing==3.0.9
python-dateutil==2.8.2
pytz==2022.5
redis==4.3.4
requests==2.28.1
rq==1.11.1
six==1.16.0
sqlparse==0.4.3
texttable==1.6.4
tzdata==2022.5
urllib3==1.26.12
wrapt==1.14.1

当前异常显示效果 #

修复步骤 #

1. 修正Admin字段匹配逻辑 #

原代码中用gis_models作为formfield_overrides的键是错误的，必须指定具体的字段类型gis_models.PointField，否则Widget无法正确绑定到目标字段，导致配置不生效：

@admin.register(Facility)
class FacilityAdmin(admin.ModelAdmin):
    formfield_overrides = {
        gis_models.PointField: {'widget': GooglePointFieldWidget},  # 替换原有的gis_models
    }

2. 调整MAP_WIDGETS配置格式 #

django-map-widgets要求GooglePointFieldWidget的参数为字典格式（而非元组嵌套），修正后的配置如下：

MAP_WIDGETS = {
    "GooglePointFieldWidget": {
        "zoom": 12,
        "mapCenterLocation": [50.8157, 9.1846],
    },
    "GOOGLE_MAP_API_KEY": env('GOOGLE_MAP_API_KEY')
}

3. 确保静态资源正常加载 #

• 确认django.contrib.staticfiles已添加到INSTALLED_APPS
• 执行命令收集静态资源：

  python manage.py collectstatic
  

• 开发环境需确保DEBUG=True，生产环境需配置正确的静态资源存储路径

4. 验证Google Maps API密钥有效性 #

• 确保密钥已启用Maps JavaScript API
• 检查密钥的IP/域名限制是否允许当前环境访问
• 打开浏览器控制台（F12）查看是否有API加载错误日志

5. 清除浏览器缓存 #

强制刷新页面（Ctrl+Shift+R）或清除浏览器缓存，避免旧静态资源导致的样式异常

内容的提问来源于stack exchange，提问作者Fateme Fouladkar