2016-04-06 18 views
3

Otomatik tamamlama kullanımı google places API ile giriş yapmak istiyorum. Ve bu benim kodudur:Google Rehber'de Özel Varsayılan Yerleri Ekle Otomatik Tamamla Otomatik Tamamla

var options = { 
    componentRestrictions: { 
     country: "de" 
    } 
    }; 
var place = ''; 

    var locationAutocompleteOneWay = document.getElementById('locationAutocompleteOneWay'); 
    var autocompleteLocationOneWay = new google.maps.places.Autocomplete(locationAutocompleteOneWay, options); 
    google.maps.event.addListener(autocompleteLocationOneWay, 'place_changed', function() { 
    place = autocompleteLocationOneWay.getPlace(); 
    }); 

daha özelleştirmek için, bazı özel yer sonucunu eklemek istediğinizde metin kutusuna ben girdi. İşte benim kod ve sonuç:

setTimeout(function() { 
    $(".pac-container").append('<div id="areasearch" class="pac-item areasearch"><span class="pac-icon pac-icon-areas"></span><span class="pac-item-query"><span class="pac-matched"></span>Test place</span> <span>custom place</span></div>'); 
    }, 500); 

enter image description here

Ama sonucu tıkladığınızda, bu benim giriş locationAutocompleteOneWay sonucun bir değeri olmuştur yapmak istiyorum. Ama nasıl yapılacağını bilmiyorum. Ve sayfadaki çoklu giriş için başvurabilirim. JQuery ve AngularJS tarafından kullanıyorum. Jquery ve AngularJS'nin tüm çözümleri benim için iyi. Teşekkürler.

+0

Bu sorunu çözdünüz mü? –

cevap

0

Bulduğum şey, eklediğiniz özel konumları lat/lng (ve ihtiyacınız olan başka bir şey) ayarlamak için kullanılabilecek özniteliklerle yüklerseniz, o zaman atayacağınız ana çalışma etkinliğine bağlanabilirsiniz. Otomatik tamamlama için özel bir yer nesnesi. senaryom ise

, ben (bu sayfadaki tüm otomatik tamamlama elemanları ekler) tamamlar bir öğe ekleyerek şu pasajı vardır:,

$(".pac-container").append('<div id="areasearch' + i + '" class="pac-item areasearch custom" val="' + PlaceName + '" lat="' + Latitude + '" lng="' + Longitude + '" style="display: none;"><span class="pac-icon pac-icon-areas"></span><span class="pac-item-query"><span class="pac-matched"></span>' + PlaceName + '</span> <span>' + LocationName + '</span></div>'); 

sınıflar pac-madde ve özel kullanma ben

 setTimeout(function() { 
      $("div.pac-item.custom").mousedown(function() { 
       setCustomLocation($(this)); 
      }) 
     }, 100); 

Ve özel konumu fonksiyonudur:

setCustomLocation = function (obj) { 
     $("#" + currInput).val($(obj).attr("val")); 
     var newObj = {}; 
     newObj["geometry"] = {} 
     newObj["geometry"]["location"] = {} 
     newObj["geometry"]["location"]["lat"] = function() { return $(obj).attr("lat"); } 
     newObj["geometry"]["location"]["lng"] = function() { return $(obj).attr("lng"); } 
     currAutocomplete.set("place", newObj); 
    } 

şöyle ardından bağlamak İlk satır, adı aktif giriş alanına, geri kalanı ise aktif otomatik tamamlama için yer nesnesini (diğer olaylarda yakalanan her iki değişken) ayarlar. Proje için ihtiyaç duyduğum tek değerler geometri lat/lng çiftiydi, ancak daha fazlasına ihtiyacınız varsa, onu ebeveyninizden almanız gereken her türlü değerle yükleyin.

İlgili konular