Google商家自動填充API多實例

我的網站有問題。在提交表單之前，我使用自動完成來查找地址的經緯度。問題是，在我有2個實例的頁面上，我在Chrome中得到一個錯誤「'geometry'爲空或不是對象」，第一個實例不會得到latlon。Google商家自動填充API多實例

if($('input#searchArea').length){ 
     var input = document.getElementById('searchArea'); 
     var options = { 
      componentRestrictions: {country: 'uk'} 
     } 
     var autocomplete = new google.maps.places.Autocomplete(input, options); 

     google.maps.event.addListener(autocomplete, 'place_changed', function(){ 
      var place = autocomplete.getPlace(); 
      var location = String(place.geometry.location); // The problemed line 
      var latLong = location.substr(1, location.length-2); 
      latLong = latLong.split(', '); 
      if($('input#searchLatLong').length == 0) $('form#findArea').append('<input type="hidden" name="ll" id="searchLatLong" />'); 
      $('input#searchLatLong').val(latLong[0] + ',' + latLong[1]); 
     }); 
    } 

    if($('input#letArea').length){ 
     var input = document.getElementById('letArea'); 
     var options = { 
      componentRestrictions: {country: 'uk'} 
     } 
     autocomplete = new google.maps.places.Autocomplete(input, options); 

     google.maps.event.addListener(autocomplete, 'place_changed', function(){ 
      var place = autocomplete.getPlace(); 
      var location = String(place.geometry.location); 
      var latLong = location.substr(1, location.length-2); 
      latLong = latLong.split(', '); 
      if($('input#letLatLong').length == 0) $('form#letPlaceArea').append('<input type="hidden" name="ll" id="letLatLong" />'); 
      $('input#letLatLong').val(latLong[0] + ',' + latLong[1]); 
     }); 
    }

有沒有人遇到過這個？

乾杯， RJ

編輯：發現問題。這是變量命名相同。在第二個實例上更改它們將其排序。

乾杯， RJ

來源

2012-08-25 TMPilot

如果您已經發現問題，請刪除問題或發佈答案並接受答案，以免我們浪費時間。 – Marcelo

發現問題。這是變量命名相同。在第二個實例上更改它們將其排序。

來源

2012-08-27 13:06:23 TMPilot

我不知道這是否是解決這個問題的最好辦法，但我已經做到了這一點：

function initialize() { 
    var input = document.getElementById('searchTextField'); 
    var options = { 
     types: ['(cities)'] 
    }; 
    var autocomplete = new google.maps.places.Autocomplete(input, options); 
    } 
    google.maps.event.addDomListener(window, 'load', initialize); 


function initialize1() { 
    var input = document.getElementById('searchTextFieldedit'); 
    var options = { 
     types: ['(cities)'] 
    }; 
    var autocomplete = new google.maps.places.Autocomplete(input, options); 
    } 
    google.maps.event.addDomListener(window, 'load', initialize1);

希望這對您有所幫助，最好的問候

來源

2014-10-08 20:55:17 DanielV

或者（作爲更清潔的解決方案），您可以爲每個實例啓動動態變量，例如：'window [prefix +「autocomplete」]' –

function initialize(pre) { 
    window[pre+"autocomplete"] = new google.maps.places.Autocomplete(
     (document.getElementById(pre+'street_address')), 
     { types: ['geocode'] }); 
    google.maps.event.addListener(window[pre+"autocomplete"], 'place_changed', function() { 
    fillInAddress(pre); 
    }); 
} 

function fillInAddress(pre) { 

    var place = window[pre+"autocomplete"].getPlace(); 

    for (var component in componentForm) { 
     document.getElementById(pre+component).value = ''; 
     document.getElementById(pre+component).disabled = false; 
    } 

    for (var i = 0; i < place.address_components.length; i++) { 
     var addressType = place.address_components[i].types[0]; 
     if (componentForm[addressType]) { 
      var val = place.address_components[i][componentForm[addressType]]; 
      jQuery("#"+pre+addressType).val(val); 
     } 
    } 
    updateStreet("#"+pre) 
}

而且當然，你需要通過jQuery或onload（）兩次啓動;

jQuery(function() { 
    initialize("foo_") 
    initialize("bar_") 
});

來源

2015-03-26 18:59:26

Google商家自動填充API多實例

回答

相關問題