javascript - 在谷歌地图上添加多个标记

Question

我正在尝试从我的数据库中检索经纬度值并在 googlemap 上将它们可视化。我不确定如何使用 for 循环访问这些字段

模型.py

import json from django.db 
import models from django.utils.translation 
import ugettext_lazy as _

class LocateGoose(models.Model):
    class Meta:
        app_label = 'My Goose'
        verbose_name = _('Where is the Goose?')

    external_id = models.IntegerField(unique=True)
    latitude = models.DecimalField(max_digits=9, decimal_places=6, null=True)
    longitude = models.DecimalField(max_digits=9, decimal_places=6, null=True)
    name = models.TextField(max_length=250, null=True, blank=True)
    address = models.TextField(max_length=25, null=True, blank=True)

View .py

from edrive.mygoose.models import LocateGoose
from django.shortcuts import render

def testgmap(request):
    data = LocateGoose.objects.all()
    template = 'hereismygoose.html'
    return render(request, template, {"data": data})

hereismygoose.html 中的 Javascript

function initMap() {
        var myLatLng = {lat: 52.0116, lng: 4.3571};

        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 10,
          center: myLatLng
        });

        var marker = new google.maps.Marker({
          position: myLatLng,
          map: map,
          title: 'stringLocate me!'
        });
  map.setOptions({ minZoom: 4, maxZoom: 10 });
      }

Answer 1

在您的 View 中创建一个纬度和经度列表，并将其发送到上下文中的模板。

import json

def testgmap(request):
    data = LocateGoose.objects.values('name', 'latitude', 'longitude')
    json_data = json.dumps(list(data))
    return render(request, 'hereismygoose.html', {"data": json_data}) 

现在在 initMap() 函数内的 html 中循环它。

var locations = {{data|safe}};
var marker, i;

for (i = 0; i < locations.length; i++) { 
    marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i]['latitude'], locations[i]['longitude']),
        map: map,
        title: locations[i]['name']
    });
}

Reference: Google Maps Simple Multiple Marker