Question

我的网站出了问题。在提交表单之前，我使用自动完成功能查找地址的长度。问题是，在我有2个实例的页面上，我在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]);
        });
    }

以前有人遇到过这个吗？

干杯， RJ

编辑：发现问题。变量被命名为相同。在第二个实例上更改它们对它进行了排序。

干杯， RJ

Answer 1

发现问题。变量被命名为相同。在第二个实例上更改它们对它进行了排序。

Answer 2

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

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

希望对你有所帮助，最诚挚的问候

Answer 3

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

Google商家信息自动填充API多个实例

3 个答案: