如何动态生成谷歌自动完成地址api

How to generate google autocomplete address api dynamically

本文关键字：谷歌 api 地址 何动态 动态      更新时间：2023-09-26

我需要生成n个数字地址抓取器，并获得json格式的输出，这可以通过点击按钮的ajax来完成。但我不知道如何使用googleapi动态生成自动完成并单独获取内容。

我需要展示与这把小提琴完全相同的设计。

http://jsfiddle.net/6BcUD/

initialize();
var placeSearch, autocomplete;
var componentForm = {
  street_number: 'short_name',
  route: 'long_name',
  locality: 'long_name',
  administrative_area_level_1: 'short_name',
  country: 'long_name',
  postal_code: 'short_name'
};
function initialize() {
  autocomplete = new google.maps.places.Autocomplete(
      /** @type {HTMLInputElement} */(document.getElementById('autocomplete')),
      { types: ['geocode'] });
  google.maps.event.addListener(autocomplete, 'place_changed', function() {
    fillInAddress();
  });
}
function fillInAddress() {
  var place = autocomplete.getPlace();
  for (var component in componentForm) {
    document.getElementById(component).value = '';
    document.getElementById(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]];
      document.getElementById(addressType).value = val;
    }
  }
}
function geolocate() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var geolocation = new google.maps.LatLng(
          position.coords.latitude, position.coords.longitude);
      autocomplete.setBounds(new google.maps.LatLngBounds(geolocation,
          geolocation));
    });
  }
}

目前我已经添加了3个表单，但我需要通过"添加表单"按钮添加它，我认为我可以通过使用jquery append来完成。但是，如何使它在谷歌自动完成工作？

感谢

如果您想重用javascript代码来管理多个表单，那么您的javascript代码必须更"通用"，而不是基于DOM元素ID。

包含自动完成实例的全局var不是一个好主意。

我编辑了你的jsFiddle，向你推荐了一个基于jQuery的解决方案（你放了jQuery标签，所以我认为我可以依赖它）：

  • 我定义了一个div #addressForms，点击#addForm按钮后将在其中添加表单
  • 我已经把你的表单包装在一个隐藏的div #template中。每次单击#addForm时，模板内容都会被复制、使用自动完成进行初始化并附加到#addressForms
  • 由于DOM元素id必须是唯一的，我删除了表单元素id，并将它们用作css类
  • 我还删除了全局变量componentForm，并在每个字段元素上添加了数据（data-type）

看看jsFiddle是否满足您的需求。

编辑：

我根据您的评论创建了这个jsFiddle。它还没有完成，但它会有所帮助。

相关文章：