时间戳

首页 > 解决方案 > “如何在模板中使用传单加载地图？”

leaflet - “如何在模板中使用传单加载地图？”

问题描述

它适用于django 默认管理站点表单但不适用于自定义模板 html 文件.

我尝试在leafletwidget 上传递属性，加载leaflet_tags。它不起作用，或者我是新手，无法正确使用它们。

创建.html

{% extends 'index.html' %}
{% load leaflet_tags %}
{% leaflet_js plugins="forms" %}
{% leaflet_css plugins="forms" %}
{% load static %}
{% block content %}
<form method="POST"> {% csrf_token %}
{{ form.as_p }}
    <button type="submit" value="Save">Save</button>
</form>
{% endblock %}

视图.py

 class AdminForm(forms.ModelForm):

        class Meta:
            model = Outlet
            fields = ['display_name', 'location']
            widgets = {'location': LeafletWidget()}

模型.py

location = geomodel.PointField()

想在我的创建表单上加载地图

标签： leafletdjango-2.2django-leaflet

解决方案

Leaflet 有一个很棒的文档/快速入门指南：
https ://leafletjs.com/examples/quick-start/

或者简单地建立在这个 *.html 片段上（它使用 openstreetmap 瓦片服务器而不是 MapBox 瓦片服务器）：

{% extends 'index.html' %}
{% block content %}

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
  integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
  crossorigin=""/>

<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
  integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
  crossorigin=""></script>

<div id="mapid" class="w-100 h-100">

  <script>
    var zoom = 10
    var lat = 51.11
    var lon = 9.85
    var mymap = L.map('mapid').setView([ lat, lon, {{world_border.lon}}], zoom);

    L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a>',
      //maxZoom: 15,
      subdomains: ['a','b','c']
      }).addTo(mymap);

    var marker = L.marker([ lat, lon ]).addTo(mymap);

  </script>
</div>
{% endblock %}

它应该看起来像这样
https://i.stack.imgur.com/gq8r4.png

与传单快速入门指南中一样，您也可以使用 mapbox 瓦片服务器，看起来更好，但成本（如果您每天超过 25'000 次点击）并且您需要登录并获取令牌。但它看起来相当不错。
请参阅https://leafletjs.com/examples/quick-start/example.html

L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 18,
    id: 'mapbox/streets-v11',
    tileSize: 512,
    zoomOffset: -1,
    accessToken: 'your.mapbox.access.token'
}).addTo(mymap);

推荐阅读