我正在尝试在弹出窗口中显示我的模型中的两个字段。 （名称和照片）。我只能显示一个字段或什么都不显示。我无法弄清楚如何让它发挥作用。
如果有人能指出正确的方向，我会很高兴。
这是我的起点，这只会显示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"
}
}
]
}
我确实尝试修改模型以使用属性描述符传递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>
答案 0 :(得分：0)
在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。