在 Ajax 成功后使用 Django 创建一个新的谷歌地图

Question

我在荷兰制作了一个带有潜水地点的谷歌地图。下一步是用户可以在页面上搜索潜水地点，搜索结果会显示在 Google 地图上。所以它必须替换现有的地图。

我是 Django 新手，以前从未使用过 Javascript。问题是我不知道如何制作一张新地图，其中包含从搜索结果中返回的潜水地点。

网址.py

from django.conf.urls import url
from . import views

app_name = 'kaart'

urlpatterns = [
    # /gis
    url(r'^$', views.index, name='index'),

    # Voor ajax zoekfunctie
    url(r'^search/$', views.search_duik_locaties, name='search_duik_locaties'),

    # /gis/id_number/
    url(r'^(?P<duik_id>[0-9]+)/$', views.detail, name='detail'),

]

views.py

from django.shortcuts import render, get_object_or_404
from .models import Duikplaats


def index(request):
    all_duik_locaties = Duikplaats.objects.all()
    longitude = Duikplaats.objects.values('longitude')
    latitude = Duikplaats.objects.values('latitude')


    content = {
        'all_duik_locaties': all_duik_locaties,
        'longitude': longitude,
        'latitude': latitude,
    }
    return render(request, 'kaart/index.html', content)


def detail(request, duik_id):
    duikplaats = get_object_or_404(Duikplaats, pk=duik_id)
    return render(request, 'kaart/details.html', {'duikplaats': duikplaats})


def search_duik_locaties(request):
    query = request.GET.get('q')

    if query is not None and query != '' and request.is_ajax():
        zoek_duik_locaties = Duikplaats.objects.filter(duik_locatie__icontains=query)
        lat = zoek_duik_locaties.values('latitude')

        con = {
            'zoek_duik_locaties': zoek_duik_locaties,
            'lat': lat
        }

        return render(request, 'kaart/ajax_search.html', con)
    return render(request, 'kaart/ajax_search.html')

index.html（Ajxax 调用的一部分）

    $('#search').keyup(function (event) {
      var query =($('#search').val());


          if (query != '' || query != ' ') {
            $.ajax({
               type: 'GET',
               url: '/gis/search',
               data: {
                 'csrfmiddlewaretoken': '{{ csrf_token }}',
                 'q': query
               },
{#                dataType: 'json',#}
               success: function(data) {
                  $('#search-results').html(data);
                  for (var i=0; i <markers.length; i++) {
                      markers[i].setMap(null);

                  }
                  markers = [];


               },
               error: function(data) {
                  console.log(data);
               }
             });
          }
        });

ajax_search.html

<ul id="results">
    {% for locatie in zoek_duik_locaties %}
        <li><a href="/gis/{{ locatie.id }}">{{ locatie.duik_locatie }}</a> </li>
        <p>{{ lat }}</p>
    {% endfor %}


</ul>

我希望地图将使用新标记进行更新。这样用户就可以在地图上看到他搜索的潜水地点。

当用户搜索和现有标记消失时，我现在得到了潜水位置列表，但我没有完成标记会更新。

Answer 1

我遇到了同样的问题，请让我分享通过 AJAX 添加标记的代码。

以下代码会根据用户当前位置通过感兴趣的 AJAX 标记进行更新。

var map = new google.maps.Map(document.getElementById('map'),
var pos = {lat: position.coords.latitude,lng: position.coords.longitude};    
function updatePosition()
    $.ajax({
    url: '/ajax/geo/',
    type: 'POST',
    data: {
      'csrfmiddlewaretoken': '{{ csrf_token }}',
      'pos': pos
    },
    dataType: 'json',
    success: function (outcome) {
        var locations = outcome;
        for (i = 0; i < locations.length; i++) {
            marker = new google.maps.Marker({
                icon : 'http://maps.google.com/mapfiles/ms/icons/green-dot.png',
                position: new google.maps.LatLng(locations[i].Latitud, locations[i].Longitud),
                map: map
            });

ajax/geo 的视图如下：

def ajaxGeo(request):
  data = request.POST
  lati = data.get('pos[lat]','')
  longi = data.get('pos[lng]','')
  # EDIT: Only for prototyping
  model = Locacion.objects.filter(Latitud__lte=float(lati)+0.001)
  model = model.filter(Latitud__gte=float(lati)-0.001)
  model = model.filter(Longitud__lte=float(longi)+0.001)
  model = model.filter(Longitud__gte=float(longi)-0.001)
  outcome =[]
  for m in model:
    outcome.append(model_to_dict(m))
  return JsonResponse(outcome, safe=False)

对于我从您的代码中看到的内容，您完全错过了 AJAX 获得响应的视图。您还需要修改函数以添加标记。

注意：如果您想要一个全新的原型地图，我最好重新加载网页，然后再优化您的 API 配额使用和用户体验。