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

Question

它可以在上使用，但不能在上使用。

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

create.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 %}

view.py

 class AdminForm(forms.ModelForm):

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

models.py

location = geomodel.PointField()

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

Answer 1

传单在以下位置有很棒的文档/快速入门指南：
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);