Javascript 如何动态生成google自动完成地址api

我需要生成n个地址抓取器，并获得json格式的输出，我可以通过ajax点击按钮来实现。但我不明白如何使用GoogleAPI动态生成autocomplete并单独获取这些内容

我需要显示完全相同的设计类型，这是附加在这个小提琴

initialize（）；
var placeSearch，自动完成；
变量组件形式={
街道编号：“短名称”，
路线：'long_name'，
地点：'long_name'，
行政区域级别1:“短名称”，
国家：'long_name'，
邮政编码：“短名称”
};
函数初始化（）{
autocomplete=new google.maps.places.autocomplete(
/**@type{HTMLInputElement}*/（document.getElementById（'autocomplete'），
{类型：['geocode']}）；
google.maps.event.addListener（自动完成，'place\u changed'，函数（）{
fillInAddress（）；
});
}
函数fillInAddress（）{
var place=autocomplete.getPlace（）；
for（componentForm中的var组件）{
document.getElementById（组件）.value=''；
document.getElementById（组件）.disabled=false；
}
对于（变量i=0；i

目前我已经添加了3个表单，但是我需要通过一个“addform”按钮来添加它，我想我可以使用jqueryappend来完成。但是如何让它在谷歌自动完成中工作呢

---

谢谢

如果您想重新使用javascript来管理多个表单，您的javascript代码必须更加“通用”，而不是基于DOM元素ID

包含autocomplete实例的全局变量是个好主意

我编辑了您的JSFIDLE以向您推荐一个基于jQuery的解决方案（您放置了jQuery标记，因此我认为我可以依赖）：

• 我定义了一个div

  #addressForms

  ，点击

  #addForm

  按钮后，表单将被追加到该div中
• 我已将您的表单组合包装在一个隐藏的div

  #模板中。每次单击
  #addForm
  ，模板内容都将被复制，并用autocomplete初始化并附加到
  #addressForms

• 由于DOM元素ID必须是唯一的，所以我删除了表单元素ID，并将它们用作css类
• 我还删除了全局变量

  组件表单

  ，并在每个字段元素上添加了数据（

  数据类型

  ）

如果它符合您的需要，请查看

编辑：

---

我根据你的意见创建了这个。它还没有完成，但它可以提供帮助。

我编辑了JSFIDLE，在

#addForm

单击函数中为

添加了一个
。我还将css类替换为
数据组件
属性，以构建要在ajax调用中发送的数据。查看
#sendData
单击函数以执行ajax调用。您需要修改它来指定您的url，也许还需要修改数据格式（数据写在表单后面以说明生成的内容）。别忘了接受这样的回答！好的，事实上，当你点击“订购一个送货单”时，你需要打开带有“订单#1”的模式，其中包含所有字段和自动完成初始化的表单。然后单击“添加表单”将添加一个“订单#2”，并初始化第二个表单，对吗？如果是这样，您需要调整脚本。确认我这就是你想做的，我今晚或明天会帮你。那么你必须自己继续，我不能做你所有的工作
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));
    });
  }
}