更改Google地图自动填充字段的值

如何在值更改后更改Google地图自动填充字段的值？更改Google地图自动填充字段的值

我的最终愿望是只显示在这个领域的地址，以及城市，州等在不同的领域。

如http://jsbin.com/wiye/2/（脚本重复以下）所示，我更改了该值，但稍后又改回。

show just the street address in google.maps.event.addListener()问同样的问题，但它不再出现工作。 Change the value in textbox of a google map autocomplete也提出同样的问题，但没有足够的答案。

谢谢

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <title>Places search box</title> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js" type="text/javascript"></script> 
     <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script> 
     <script> 
      $(function(){ 
       var input_auto = document.getElementById('input_auto'); 
       autocomplete = new google.maps.places.Autocomplete(input_auto,{types: ['geocode'],radius: 10}); 
       google.maps.event.addListener(autocomplete, 'place_changed', function() { 
        setTimeout(function(){$('#input_auto').val('yyy');},50); 
        alert('pause1'); 
        console.log(autocomplete,input_auto); 
        input_auto.value='xxx'; 
        //autocomplete.set('xxx'); 
        //autocomplete.setValues('xxx'); 
        alert('pause2'); 
       }); 
      }); 

     </script> 
    </head> 
    <body> 
     <input id="input_auto" type="text"> 
    </body> 
</html>

来源

2014-02-09 user1032531

可能的重复http://stackoverflow.com/questions/21617795/google-maps-autocomplete-bounces-back-already-cleared-text-odd-odd-odd/21620115#21620115 –

@ Dr.Molle你认为这是海报所说的“错误”，还是Google眼中的一个特征？ – user1032531

我会称之为不完整的实现。与打字相比，改变输入值的方法更多（例如，以编程方式，但也可以例如剪切/粘贴或表单的重置方法），API应该考虑到这些可能性。 –

您可以通过添加事件侦听器blur和事件覆盖自动值解决这个问题。看看我下面做的：

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <title>Places search box</title> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js" type="text/javascript"></script> 
 
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script> 
 
    <script> 
 
     $(function(){ 
 
     var input_auto = document.getElementById('input_auto'); 
 
     autocomplete = new google.maps.places.Autocomplete(input_auto,{types: ['geocode'],radius: 10}); 
 
     google.maps.event.addListener(autocomplete, 'place_changed', function() { 
 
      input_auto.addEventListener('blur', function() { 
 
      input_auto.value = 'yyy'; 
 
      }); 
 
      input_auto.addEventListener('keydown', function() { 
 
      input_auto.value = 'yyy'; 
 
      }); 
 
      setTimeout(function(){$('#input_auto').val('yyy');},1); 
 
     }); 
 
     }); 
 

 
    </script> 
 
    </head> 
 
    <body> 
 
    <input id="input_auto" type="text"> 
 
    </body> 
 
</html>

如果您遇到任何问题，可以选择添加一个定时器。

来源

2014-05-23 18:23:23

您正在使用一些您不需要的事件。当用户从自动填充选项中选择地址时，自动完成会触发place_changed事件。当该事件触发时，自动填充会填充它所附加的字段。

这里有一个更恰当结构的回答你的问题，使您能够“展示在这一领域的地址，城市，国家等在不同的领域”：

(function() { 

    var $inputAuto = $('#input_auto'); 

    var addrComponents = { 
    streetNumber: { 
     display: 'short_name', 
     type: 'street_number' 
    }, 
    streetName: { 
     display: 'long_name', 
     type: 'route' 
    }, 
    cityName: { 
     display: 'long_name', 
     type: 'locality' 
    }, 
    stateName: { 
     display: 'short_name', 
     type: 'administrative_area_level_1' 
    }, 
    zipCode: { 
     display: 'short_name', 
     type: 'postal_code' 
    } 
    }; 

    var autocomplete; 
    var autocompleteOptions = { 
    radius: 10, 
    types: ['geocode'] 
    }; 


    function initAutocomplete() { 
    autocomplete = new google.maps.places.Autocomplete($inputAuto[0], autocompleteOptions); 
    autocomplete.addListener('place_changed', setAddress); 
    }; 

    function setAddress() { 
    var place = autocomplete.getPlace().address_components; 

    var streetAddr = [addrComponents.streetNumber, addrComponents.streetName]; 
    var streetAddrDisplay = []; 

    // Add additional field values 

    place.forEach(function(placeComponent) { 
     streetAddr.forEach(function(streetAddrComponent) { 
     if (placeComponent.types[0] === streetAddrComponent.type) { 
      streetAddrDisplay.push(placeComponent[streetAddrComponent.display]); 
     } 
     // else if <additional field values> 
     }); 
    }); 
    var addrString = streetAddrDisplay.join(' '); 
    $inputAuto.val(addrString); 
    }; 

    initAutocomplete(); 

}());

autocomplete.getPlace()返回一个对象与一堆的东西，你可以用于其他地图API调用。但是，您只需要第一个对象即address_components。这是一组匹配的地址组件对象。这些对象中的每一个都有一个long_name和short_name，您将用它们来填充输入。每个对象还包括一个types数组，指示字符串表示的内容（0索引是对象的唯一标识）。在你的情况：街道号码（street_number），街道名称（route），城市（locality），县（administrative_area_level_2），州（administrative_area_level_1），国家（country）和邮编（postal_code）。

在此示例中，addrComponents对象包含易于阅读的选项，用于匹配place阵列中的项目。为了达到您想要填充多个字段的效果，您只需选择字段并使用$inputName.val(desiredString)设置它们的内容。

作为附加参考，Google Maps JavaScript API docs包含您想要完成的an example。

希望有所帮助。祝你好运！

来源

2016-02-19 17:21:42 SwankyLegg

更改Google地图自动填充字段的值

回答

相关问题