Javascript 使用jquery更改映射地址

我现在有这个代码，当用户点击div时，地图上的位置会随着更新的地址而改变：

<div class="row">
        <div class="col-sm-12 col-lg-6">
          <div class="dir">
          <h3 class="title">Shopping abasto</h3>
          <p>tel: 4676-4565</p>
          <p>Avenida Marota</p>
          <div id="map" data-maps="Av. Aconquija 600, Paseo Heller, Yerba Buena, Tucuman"><span class="glyphicon glyphicon-map-marker" id="dir"></span></div>
          </div>
          <div class="dir">
          <h3 class="title">Shopping abasto</h3>
          <p>tel: 4676-4565</p>
          <p>Avenida Marota</p>
          <div id="map" data-maps="Juncal 1213, Buenos Aires, Argentina"><span class="glyphicon glyphicon-map-marker"></span></div>
          </div>
          <div class="dir">
          <h3 class="title">Shopping abasto</h3>
          <p>tel: 4676-4565</p>
          <p>Avenida Marota</p>
          <div id="map" data-maps="Paseo Pilar, Del Viso, Buenos Aires Province"><span class="glyphicon glyphicon-map-marker"></span></div>
          </div>

        </div>
        <div class="col-sm-12 col-lg-6">
            <div class="map">
                <iframe width="100%" height="368" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?q=Buenos%20Aires%2C%20Argentina&key=AIzaSyCDg1Dfoxg3cKcOsucYZQnTjpmPjbUqe2M"></iframe>
            </div>
            <div class="col-separador-s"></div>
            <div class="">
            <img src="http://placehold.it/727x502">
            </div>
        </div>
    </div>

---

Jquery的selector by id返回一个元素，这就是为什么它只对第一个元素起作用。 您需要使用类而不是id

取代

<div class="map" ... >

---

元素id在DOM中必须是唯一的，才能按预期工作。呈现具有相同ID的元素时不会出现错误，但是这违反了标准实践，并引入了您在这里遇到的问题

有关ID和类之间更深入的区别，请参阅

因此，要解决您遇到的问题，您应该进行以下调整：

将地图id div从

更改为

将映射类jQuery选择器从

jQuery（'#map'）

更改为

jQuery（'.map'）

将

iframe

包装div更改为

将iframe的jQuery选择器更改为

jQuery（“#映射包装器iframe”）

---

你有无效的HTML；

id

在文档中必须是唯一的；查看您的代码，只需将

id

转换为

类

；并将选择器从

$（'#map'）

更新为

$（'.map'）

+1虽然使用类作为标识符不是一个好的做法，但最好重命名您的ids map1、map2和map3，并将

$（'#map'）

更改为

$（'div[id^=map]'）

谢谢。非常有用的解释。

<div class="map" ... >

jQuery('.map')