在Django中使用Mapbox-gl-js的不同图钉

Question

我正在尝试用Django为我的旅游博客创建一个动态的地点地图，以便根据数据库中的新条目自动更新。到目前为止，它进行得很好(链接：http://puchalatravel.com/map)，我遇到的问题是基于数据库中的状态字段创建不同的颜色别针。我想有4种颜色的4种不同的状态选项。

我对JavaScript的了解还不够深入，不知道如何处理这个问题。我在谷歌上搜索并尝试了JS for()循环，但没有成功。

目前，我的代码如下所示: models.py

class PlaceStatus(models.Model):
    status = models.CharField(max_length=32)

    class Meta:
        verbose_name_plural = "Place statuses"

    def __unicode__(self):
        return self.status

    def __str__(self):
        return self.status


class Place(models.Model):
    name = models.CharField(max_length=32)
    coord_v = models.FloatField()
    coord_h = models.FloatField()
    status = models.ForeignKey(PlaceStatus, on_delete=models.CASCADE)
    trip = models.ManyToManyField(Trip, blank=True, null=True)
    images = models.ManyToManyField(Image, blank=True, null=True)

    def __unicode__(self):
        return self.name

    def __str__(self):
        return self.name

views.py

def map(request):
    places = Place.objects.all()
    return render(request, 'blog/map.html', {'places': places})

map.html

{% extends 'blog/base.html' %}

{% block header %}
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.47.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.47.0/mapbox-gl.css' rel='stylesheet'/>
{% endblock %}

{% block banner %}
{% endblock %}

{% block two_columns %}

<div id='map'></div>

<script>

mapboxgl.accessToken = 'pk.eyJ1IjoibWljaGFscHVjaGFsYSIsImEiOiJjamxxeWk0ZTYwcWJyM3BwbGVzMWpobjFqIn0.sBxqcK2lDMxn9RvqaBfduw';

var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/light-v9',
center: [0, 40],
zoom: 1.0
});

var geojson = {
type: 'FeatureCollection',
features: [
{% for place in places %}
    {
    type: 'Feature',
    geometry: {
        type: 'Point',
        coordinates: [{{ place.coord_h }}, {{ place.coord_v }}]
    },
    properties: {
        title: '{{ place.name }}',
        description: '{{ place.status }}'
    }
    },
{% endfor %}
]
};

// add markers to map
geojson.features.forEach(function(marker) {

// create a HTML element for each feature
var el = document.createElement('div');
el.className = 'marker-green';

// make a marker for each feature and add to the map
new mapboxgl.Marker(el)
.setLngLat(marker.geometry.coordinates)
.setPopup(new mapboxgl.Popup({ offset: 25 }) // add popups
.setHTML('<h3>' + marker.properties.title + '</h3><p>' + marker.properties.description + '</p>'))
.addTo(map);
});

</script>
{% endblock %}

default.css

#map {
width:100%;
height: 90%
}

.marker-green {
background-image: url(../pictures/green_pin.png);
background-size: cover;
width: 15px;
height: 15px;
border-radius: 50%;
cursor: pointer;
}

.marker-red {
background-image: url(../pictures/red_pin.png);
background-size: cover;
width: 15px;
height: 15px;
border-radius: 50%;
cursor: pointer;
}

您可以在以下GitHub代码库中找到所有代码：https://github.com/michalpuchala/puchalatravel

在map.html JS中创建条件的最简单或最可靠的方法是什么，它会根据status的值选择不同的颜色(即不同的CSS类)？

Answer 1

好了，我终于想通了。

views.py

def map(request):
    planned_places = Place.objects.filter(status=1)
    visited_places = Place.objects.filter(status=2)
    planned_wedding_places = Place.objects.filter(status=3)
    visited_wedding_places = Place.objects.filter(status=4)
    return render(request, 'blog/map.html',
                {'planned_places': planned_places,
                'visited_places': visited_places,
                'planned_wedding_places': planned_wedding_places,
                'visited_wedding_places': visited_wedding_places})

map.html

{% extends 'blog/base.html' %}

{% block header %}
    <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.47.0/mapbox-gl.js'></script>
    <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.47.0/mapbox-gl.css' rel='stylesheet'/>
{% endblock %}

{% block banner %}
{% endblock %}

{% block two_columns %}

<div id='map'></div>

<script>

mapboxgl.accessToken = 'pk.eyJ1IjoibWljaGFscHVjaGFsYSIsImEiOiJjamxxeWk0ZTYwcWJyM3BwbGVzMWpobjFqIn0.sBxqcK2lDMxn9RvqaBfduw';

var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/light-v9',
center: [0, 40],
zoom: 1.0
});

// planned
var geojson_planned = {
type: 'FeatureCollection',
features: [
{% for i in planned_places %}
    {
    type: 'Feature',
    geometry: {
        type: 'Point',
        coordinates: [{{ i.coord_h }}, {{ i.coord_v }}]
    },
    properties: {
        title: '{{ i.name }}',
        description: '{{ i.status }}'
    }
    },
{% endfor %}
]
};

// add markers to map
geojson_planned.features.forEach(function(marker) {

// create a HTML element for each feature
var el = document.createElement('div');
el.className = 'marker-light-red';

// visited
new mapboxgl.Marker(el)
.setLngLat(marker.geometry.coordinates)
.setPopup(new mapboxgl.Popup({ offset: 25 }) // add popups
.setHTML('<h3>' + marker.properties.title + '</h3><p>' + marker.properties.description + '</p>'))
.addTo(map);
});

var geojson_visited = {
type: 'FeatureCollection',
features: [
{% for i in visited_places %}
    {
    type: 'Feature',
    geometry: {
        type: 'Point',
        coordinates: [{{ i.coord_h }}, {{ i.coord_v }}]
    },
    properties: {
        title: '{{ i.name }}',
        description: '{{ i.status }}'
    }
    },
{% endfor %}
]
};

// add markers to map
geojson_visited.features.forEach(function(marker) {

// create a HTML element for each feature
var el = document.createElement('div');
el.className = 'marker-light-green';

// planned wedding
new mapboxgl.Marker(el)
.setLngLat(marker.geometry.coordinates)
.setPopup(new mapboxgl.Popup({ offset: 25 }) // add popups
.setHTML('<h3>' + marker.properties.title + '</h3><p>' + marker.properties.description + '</p>'))
.addTo(map);
});

var geojson_planned_wedding = {
type: 'FeatureCollection',
features: [
{% for i in planned_wedding_places %}
    {
    type: 'Feature',
    geometry: {
        type: 'Point',
        coordinates: [{{ i.coord_h }}, {{ i.coord_v }}]
    },
    properties: {
        title: '{{ i.name }}',
        description: '{{ i.status }}'
    }
    },
{% endfor %}
]
};

// add markers to map
geojson_planned_wedding.features.forEach(function(marker) {

// create a HTML element for each feature
var el = document.createElement('div');
el.className = 'marker-red';

// visited_wedding
new mapboxgl.Marker(el)
.setLngLat(marker.geometry.coordinates)
.setPopup(new mapboxgl.Popup({ offset: 25 }) // add popups
.setHTML('<h3>' + marker.properties.title + '</h3><p>' + marker.properties.description + '</p>'))
.addTo(map);
});

var geojson_visited_wedding = {
type: 'FeatureCollection',
features: [
{% for i in visited_wedding_places %}
    {
    type: 'Feature',
    geometry: {
        type: 'Point',
        coordinates: [{{ i.coord_h }}, {{ i.coord_v }}]
    },
    properties: {
        title: '{{ i.name }}',
        description: '{{ i.status }}'
    }
    },
{% endfor %}
]
};

// add markers to map
geojson_visited_wedding.features.forEach(function(marker) {

// create a HTML element for each feature
var el = document.createElement('div');
el.className = 'marker-green';

// make a marker for each feature and add to the map
new mapboxgl.Marker(el)
.setLngLat(marker.geometry.coordinates)
.setPopup(new mapboxgl.Popup({ offset: 25 }) // add popups
.setHTML('<h3>' + marker.properties.title + '</h3><p>' + marker.properties.description + '</p>'))
.addTo(map);
});

</script>
{% endblock %}