Question

我使用google maps api autocomplete搜索商店并在html表单上显示其城市和国家/地区。我还更新了搜索商店的地图预览。到目前为止，这个工作正常。

我添加了复制流程的可能性：添加另一个商店，删除一个商店，并将其标记为＆＃34; first＆＃34;店。这使得新商店重新重复相同的字段。因此，自动完成字段和地图预览也会重复。细

但是当我添加一个商店时，地图预览不适用于第二个，第三个......。

问题：

如何解决这个问题，以便分别为每个商店更新地图预览？

我正在$index跟踪我的商店：

<fieldset ng-repeat="shop in myModel.shops track by $index">

我认为我也需要对地图进行相同的索引编制，但事情变得复杂并且无法正确执行。

顺便说一句，整个代码都在angularjs中。

更新

考虑到AHC的回答，两张地图似乎都得到了更新，但是我的地图是空的，并且是灰色的。有人知道原因吗？

Answer 1

您只需要将索引添加到输入ID和地图预览ID标记即可。并通过函数中的索引引用它们。这是jsfiddle。我希望这适合你。

id="pac-input-{{$index}}"
...
id="map_canvas-{{$index}}"

并在函数内部：

  var inputID = "pac-input-"+index;
  var input = document.getElementById(inputID);

  var mapID = "map_canvas-"+index;
  map = new google.maps.Map(document.getElementById(mapID), mapOptions);

多个自动填充字段的多个谷歌地图预览

问题：

更新

1 个答案: