如何将Django模型经纬度传入JS实现谷歌地图admin标记自动展示

• views.py中不能使用Django模板语法{{ }}，这是仅在模板文件中生效的语法，Python运行时会直接把object当成内置类，自然没有latitude属性
• 静态资源（你的map.js属于static静态文件）不会被Django模板引擎解析，所以写在map.js里的{{ object.latitude }}不会被替换成实际值，直接输出成原生代码会导致JS语法报错
• 视图中没有从数据库查询你在admin中创建的Marker数据，也没有把正确的数据传入模板上下文

1. 重写views.py #

from django.shortcuts import render
from .models import Marker # 导入你定义的Marker模型
import json

def map(request):
    # 从数据库查询所有后台创建的Marker标记
    markers = Marker.objects.all()
    # 把标记列表转为JSON格式，方便前端JS读取
    markers_json = json.dumps(list(markers.values('latitude', 'longitude')))
    # 传入模板上下文
    context = {'markers': markers_json}
    return render(request, "map/map.html", context)

2. 修改map.html模板 #

不要把模板变量写在静态JS文件中，直接把地图初始化逻辑放到模板里，就能正常解析Django传入的变量：

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>map</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
    <link href="{% static 'map/css/map.css' %}" rel="stylesheet">
</head>
<body>
    <div id="map"></div>
    <!-- 在模板内定义JS逻辑，正常解析模板变量 -->
    <script>
        // safe过滤器避免Django自动转义引号导致JSON解析失败
        const allMarkers = JSON.parse('{{ markers|safe }}');
        function initMap() {
            // 没有标记时用默认经纬度作为中心
            const centerLatLng = allMarkers.length > 0 ? 
                { lat: allMarkers[0].latitude, lng: allMarkers[0].longitude } : 
                { lat: -25.363, lng: 131.044 };
            const map = new google.maps.Map(document.getElementById("map"), {
                zoom: 4,
                center: centerLatLng,
            });
            // 遍历所有后台创建的标记，全部渲染到地图上
            allMarkers.forEach(markerInfo => {
                new google.maps.Marker({
                    position: { lat: markerInfo.latitude, lng: markerInfo.longitude },
                    map: map,
                    title: "自定义标记",
                });
            })
        }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBnDE9SrH7SfZw5lPOz9MDX1ScNz1W6ncE&callback=initMap&v=weekly&channel=2" async></script>
</body>
</html>

3. 补充说明 #

如果只需要展示单个标记，修改views.py的查询逻辑即可，比如取最新创建的标记Marker.objects.latest('id')，注意做判空处理避免无数据时报错。原来的静态map.js文件可以直接删除，不需要再引入。

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