javascript - 使用 Mapbox-gl-js 和 Django 的不同地图引脚
问题描述
我正在尝试使用 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
视图.py
def map(request):
places = Place.objects.all()
return render(request, 'blog/map.html', {'places': places})
地图.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 %}
默认.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 中创建一个根据状态值选择不同颜色(即不同的 CSS 类)的条件的最简单或最可靠的方法是什么?
解决方案
好吧,我最后想通了。
视图.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})
地图.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 %}
推荐阅读
- c# - Microsoft.SqlServer.Types 是否与 ASP.NET Core 2.2 完全兼容?
- c# - 如何通过桌面/控制台应用程序使用带有不记名令牌的 ASP.NET Web API 2.0
- spring-boot - 未将所有字段从 html 映射到控制器
- html - ":last-child" 和 ":not(:last-child)" 之间的不同行为
- c# - 如何使用 ICommand 在 MVVM 中触发 TextChanged 事件
- android - Android 导航组件活动意图标志
- python - 使用 'or' 运算符处理 dict 中的 KeyError
- python - 基于列值删除行时“列名”的语法无效
- python - nxn 数据帧到矩阵(.as_matrix 将在未来版本中删除)
- reactjs - React 应用程序性能问题