Javascript Google将自动完成API放置在多个实例中

我的网站有问题。在提交表单之前，我使用autocomplete查找地址的lat-long。问题是，在我有两个实例的页面上，我在Chrome中得到一个错误“'geometry'为null或不是对象”，第一个实例将无法得到latlon

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

if（$（'input#searchArea'）.length）{
var input=document.getElementById（'searchArea'）；
变量选项={
组件限制：{country:'uk'}
}
var autocomplete=new google.maps.places.autocomplete（输入，选项）；
google.maps.event.addListener（自动完成，'place\u changed'，函数（）{
var place=autocomplete.getPlace（）；
var location=String（place.geometry.location）；//有问题的行
var latLong=位置.substr（1，位置.length-2）；
latLong=latLong.split（'，'）；
if（$（'input#searchLatLong'）.length==0）$（'form#findArea'）.append（“”）；
$（'input#searchLatLong'）.val（latLong[0]+'，'+latLong[1]）；
});
}
如果（$（'input#letArea'）。长度）{
var input=document.getElementById（'letArea'）；
变量选项={
组件限制：{country:'uk'}
}
autocomplete=newgoogle.maps.places.autocomplete（输入，选项）；
google.maps.event.addListener（自动完成，'place\u changed'，函数（）{
var place=autocomplete.getPlace（）；
变量位置=字符串（place.geometry.location）；
var latLong=位置.substr（1，位置.length-2）；
latLong=latLong.split（'，'）；
if（$（'input#letLatLong'）.length==0）$（'form#letPlaceArea'）.append（“”）；
$（'input#letLatLong'）.val（latLong[0]+'，'+latLong[1]）；
});
}

以前有人见过这个吗

干杯， RJ

编辑：发现问题。变量的名称是相同的。在第二个实例中更改它们可以对其进行排序

干杯，

---

发现RJ问题。变量的名称是相同的。在第二个实例上更改它们将对其进行排序。

发现问题。变量的名称是相同的。在第二个实例中更改它们可以排序。

我不知道这是否是解决此问题的最佳方法，但我已经这样做了：

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

希望这对你有所帮助，

---

致以最诚挚的问候

我不知道这是否是解决此问题的最佳方法，但我已经做到了：

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

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

希望这对你有所帮助，

---

致以最诚挚的问候

如果您已经发现问题，请删除问题或发布答案并接受，这样我们就不会浪费时间。如果您已经发现问题，请删除问题或发布答案并接受，这样我们就不会浪费时间。或者（作为更干净的解决方案），您可以为每个实例启动动态变量，这样：

window[prefix+“autocomplete”]

您能告诉我为什么这个代码返回未定义的吗。var input=document.getElementsByClassName（'map_address'）；对于（i=0；iwindow[prefix+“autocomplete”]您能告诉我为什么这个代码返回未定义的吗。var input=document.getElementsByClassName（'map_address'）；对于（i=0；ifunction 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) }