如何用JavaScript解析Django数据在Leaflet地图生成标记

1. 将Django地址数据传入JavaScript #

先通过Django模板把渲染后的地址列表转换成JavaScript数组，避免特殊字符破坏JS语法：

<script>
// 从Django模板获取地址数组
const addresses = [
  {% for address in addresses %}
    "{{ address.addresses|escapejs }}",
  {% endfor %}
];
</script>

2. 实现地址转经纬度的地理编码函数 #

使用开源的Nominatim地理编码服务完成地址到经纬度的转换：

// 地理编码函数：地址转经纬度
async function geocodeAddress(address) {
  try {
    const response = await fetch(`https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(address)}`);
    const data = await response.json();
    if (data.length > 0) {
      return {
        lat: parseFloat(data[0].lat),
        lon: parseFloat(data[0].lon)
      };
    } else {
      console.log(`无法匹配地址：${address}`);
      return null;
    }
  } catch (error) {
    console.error(`地理编码请求失败：${error}`);
    return null;
  }
}

3. 批量在Leaflet地图添加标记 #

整合地图初始化、地址获取和标记添加逻辑，完成完整功能：

<body>
  <div id="map"></div>
  <script>
    // 初始化Leaflet地图
    var map = L.map('map').setView([37.116386, -98.299591], 5);
    L.tileLayer('https://api.maptiler.com/maps/basic-v2/256/{z}/{x}/{y}.png?key=APIKEY', {
      attributions: '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>'
    }).addTo(map);

    // 从Django模板获取地址数组
    const addresses = [
      {% for address in addresses %}
        "{{ address.addresses|escapejs }}",
      {% endfor %}
    ];

    // 地理编码函数
    async function geocodeAddress(address) {
      try {
        const response = await fetch(`https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(address)}`);
        const data = await response.json();
        if (data.length > 0) {
          return {
            lat: parseFloat(data[0].lat),
            lon: parseFloat(data[0].lon)
          };
        } else {
          console.log(`无法匹配地址：${address}`);
          return null;
        }
      } catch (error) {
        console.error(`地理编码请求失败：${error}`);
        return null;
      }
    }

    // 批量添加地图标记
    async function addMarkers() {
      for (const address of addresses) {
        const coords = await geocodeAddress(address);
        if (coords) {
          L.marker([coords.lat, coords.lon])
            .addTo(map)
            .bindPopup(address); // 点击标记显示对应地址
        }
      }
    }

    // 执行标记添加逻辑
    addMarkers();
  </script>
</body>

关键注意事项 #

• 替换代码中的APIKEY为你的MapTiler有效密钥。
• Nominatim有请求频率限制，生产环境建议在Django后台提前将地址转换为经纬度并存储到数据库（新增latitude和longitude字段），避免前端重复请求。
• 若地址格式不规范，地理编码可能不准确，建议在Django后台对地址做标准化处理。

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