DjangoでAjaxを成功させた後、新しいGoogleマップを作成

Question

オランダでGoogle Mapsを作成しました。次のステップは、ユーザーがページ上でダイビングの場所を検索し、検索結果がGoogleマップに表示されることです。したがって、既存のマップを置き換える必要があります。

私はDjangoの新人です。以前はJavascriptで作業していませんでした。問題は、検索結果から戻ってきたダイビングの場所で新しい地図を作成する方法がわからないことです。

Urls.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

地図が新しいマーカーで更新されることを望みます。ダイビングの場所がどこで検索されたのかをユーザーが地図上で確認することができます。

ユーザーの検索と既存のマーカーがなくなったときに、ダイビングの場所の一覧が表示されましたが、マーカーが更新されることはありません。

Answer 1

同じ問題が発生しました.AJAX経由でマーカーを追加するコードを教えてください。

次のコードは、ユーザーの現在地によってAJAXマーカーが更新されます。 AJAX/GEOの

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 
      }); 

ビューは、次のようになります。

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はその応答を取得する場所からあなたの視野が欠けている、あなたのコードから見ています何のため。また、マーカーを追加するために関数を変更する必要があります。

注：プロトタイプ用の全く新しいマップが必要な場合は、Webページをリロードするのが最適です。その後、APIクォータの使用とUXを最適化してください。