我想在靜態地圖上顯示一個點（取自資料庫）結果看起來像：
對于我想顯示的每個物件，我的資料庫中都有緯度和經度資料。
問題是：這是否只能通過使用某種谷歌 API 才能實作？或者這可以通過其他方式完成？也許有人看到類似的東西，會給我提示從哪里開始？
更新：
到目前為止，我唯一要做的就是將 html 物件轉換為 js 陣列。知道怎么做嗎？html::
{% for c in object_list %}
JS::
var flights = {% for c in object_list %} <<--- convert to js..
視圖.py：
from rest_framework import viewsets
from django.views.generic import ListView
from .serializers import Flightserializer
from .models import Flights
class FlightViewSet(viewsets.ModelViewSet):
queryset = Flights.objects.all().order_by('aircraft')
serializer_class = Flightserializer
class HomePageView(ListView):
model = Flights
template_name = 'home.html'
JS：
<script type="text/javascript">
var locations = [
["LOCATION_1", 58.008759, -0.410570],
["LOCATION_2", 59.0059, -0.4105],
]; # here i need to insert data from django model..
var map = L.map('map',{
keyboard: false,
dragging: false,
zoomControl: false,
boxZoom: false,
doubleClickZoom: false,
scrollWheelZoom: false,
tap: false,
touchZoom: false,
center: [55.545454, -22.525252],
zoom: 7,
minZoom: 7,
maxZoom: 0
});
var tileLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '? OpenStreetMap contributors' }).addTo(map);
for (var i = 0; i < locations.length; i ) {
marker = new L.marker([locations[i][1], locations[i][2]])
.bindPopup(locations[i][0])
.addTo(map);
}
</script>
uj5u.com熱心網友回復：
使用 JavaScript，您可以執行以下操作：
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '? OpenStreetMap contributors' }).addTo(map);
for(let obj of object_list) {
L.marker([obj .coordinates.x, obj .coordinates.y]).addTo(map)
.bindPopup('A pretty CSS3 popup. Easily customizable.') .openPopup();
}
uj5u.com熱心網友回復：
這可以幫助你：https ://leafletjs.com/
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
L.marker([51.5, -0.09]).addTo(map)
.bindPopup('A pretty CSS3 popup.<br> Easily customizable.')
.openPopup();
uj5u.com熱心網友回復：
感謝 iDz iDz 指導我完成這件事。終于整理好了。正確的方法是在 html 檔案中：
var locations_json = "{{ data|safe }}";
在 view.py 中：
def get_context_data(self, **kwargs):
context = super().get_context_data(**kwargs)
context['data'] = [
{
'aircraft': obj.aircraft,
'latitude': obj.latitude,
'longtitude': obj.longtitude
}
for obj in Flights.objects.all()
]
return context
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/441433.html