用jQuery更改地图地址

debugcn 发表于 Dev

阿吉萨

我目前有这段代码，当用户单击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>

当我单击ID为“ map”的任何div时，我希望地图更新位置。问题在于它仅适用于第一个div，到目前为止，这是我的脚本：

jQuery(function(){
    jQuery('#map').on('click', function() {
        var maps = jQuery(this).data('maps');
         jQuery('.map iframe').attr('src','https://www.google.com/maps/embed/v1/place?q=' + maps + '&key=AIzaSyCDg1Dfoxg3cKcOsucYZQnTjpmPjbUqe2M');
    });
});

亚伦·圣克莱尔

元素ID在DOM中必须唯一，才能按预期工作。呈现具有相同ID的元素不会引发任何错误，但是这与标准做法背道而驰，并会引入诸如您在此处遇到的问题。

请参考本文，以更深入地区分ID和CLASS。

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