尝试＃1

这是我的起点，这只会显示name或photo或我追加layer.bindPopup(feature.properties.whatever);但只有一个。

models.py

from django.contrib.gis.db import models


class Marker(models.Model):
    name = models.CharField(max_length=250)
    photo = models.ImageField(blank=True)
    geom = models.PointField(blank=True, null=True, verbose_name='marker')

    def __str__(self):
        return self.name

map/views.py

from django.core.serializers import serialize
from django.http import HttpResponse
from django.views.generic import TemplateView

from map.models import Marker


def marker_view(request):
    markers_as_geojson = serialize('geojson', Marker.objects.all())
    return HttpResponse(markers_as_geojson, content_type='json')


class MapView(TemplateView):
    template_name = 'map/map.html'

map/urls.py

from django.conf import settings
from django.conf.urls import url
from django.conf.urls.static import static
from django.contrib import admin

from map import views
from map.views import MapView

urlpatterns = [
    url(r'^$', MapView.as_view()),
    url(r'^map.data/', views.marker_view, name='markers'),
    url(r'^admin/', admin.site.urls),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

map/map.html

{% load staticfiles %}
{% load static %}
<!DOCTYPE html>
{% load leaflet_tags %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Map</title>
    {% leaflet_js %}
    {% leaflet_css %}
    <link rel="stylesheet" href="{% static 'css/map.css' %}">
    <script src="{% static 'js/leaflet.ajax.min.js' %}"></script>
    <script src="{% static 'js/leaflet-hash.js' %}"></script>
</head>
<body>
<script type="text/javascript">
    function map_init_basic(map, options) {
        var geojsonPointLayer = new L.GeoJSON.AJAX("{% url 'markers' %}", {
            onEachFeature: function (feature, layer) {
                layer.bindPopup(feature.properties.name);
            }
        });
        var hash = new L.Hash(map);
        geojsonPointLayer.addTo(map);
    }
</script>
{% leaflet_map "myMap" callback="window.map_init_basic" %}
</body>
</html>

以下是从{strong> map.data

传入map/views.py序列化json的示例

{
  "type": "FeatureCollection",
  "crs": {
    "type": "name",
    "properties": {
      "name": "EPSG:4326"
    }
  },
  "features": [
    {
      "type": "Feature",
      "geometry": {
        "type": "Point",
        "coordinates": [
          9.294433592456013,
          56.05363501384915
        ]
      },
      "properties": {
        "name": "Denmark",
        "photo": "img_q2IgofC.jpg",
        "pk": "1"
      }
    }
  ]
}

尝试＃2

我确实尝试修改模型以使用属性描述符传递popupContent，因为据我所知，我可以使用@property覆盖，发送额外或修改正在发送的内容。我意识到我可能完全错过了这个标记，因为没有任何内容添加到序列化数据中。点击后弹出窗口无效

map/models.py

from django.contrib.gis.db import models


class Marker(models.Model):
    name = models.CharField(max_length=250)
    photo = models.ImageField(blank=True)
    geom = models.PointField(blank=True, null=True, verbose_name='marker')

    def __str__(self):
        return self.name

    @property
    def popupContent(self):
        return '<img src="{}" /><p><{}</p>'.format(self.photo.url, self.name)

map/map.html

{% load staticfiles %}
{% load static %}
<!DOCTYPE html>
{% load leaflet_tags %}
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Map</title>
    {% leaflet_js %}
    {% leaflet_css %}
    <link rel="stylesheet" href="{% static 'css/map.css' %}">
    <script src="{% static 'js/leaflet.ajax.min.js' %}"></script>
    <script src="{% static 'js/leaflet-hash.js' %}"></script>
</head>
<body>
<script type="text/javascript">
    function map_init_basic(map, options) {
        var geojsonPointLayer = new L.GeoJSON.AJAX("{% url 'markers' %}", {
            onEachFeature: function (feature, layer) {
                if (feature.properties && feature.properties.popupContent) {
                    layer.bindPopup(feature.properties.popupContent);
                }
            }
        });
        var hash = new L.Hash(map);
        geojsonPointLayer.addTo(map);
    }
</script>
{% leaflet_map "myMap" callback="window.map_init_basic" %}
</body>
</html>

Answer 1

在Attempt #1 map/map.html中尝试替换此行：

layer.bindPopup(feature.properties.name);

用这个：

layer.bindPopup('<img src="'+feature.properties.photo+'" /><p>'+feature.properties.name+'</p>');

您基本上需要为JavaScript中的弹出窗口构建HTML，而不是Python。

我无法让我的宣传单弹出窗口显示我想要的数据

尝试＃1

尝试＃2

1 个答案: