Question

我目前有这个代码，当用户点击div时，地图上的位置会更新地址：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>

我希望地图在点击任何带有ID＆＃39; map＆＃39;的div时更新位置。问题是它只适用于第一个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>

Answer 1

Jquery的id选择器返回一个单独的元素，这就是为什么它只适用于你的第一个元素。你需要使用类而不是id。

替换为

<div class="map" ... >

按班级匹配

jQuery('.map')

Answer 2

元素ID在DOM中必须是唯一的，才能使目标按预期工作。渲染具有相同ID的元素时不会抛出错误，但这违反了标准做法，并引入了诸如此处遇到的问题。

请参阅this article以更深入地区分ID和CLASS。

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

将地图ID div从<div id="map">更改为<div class="map">
将地图类jQuery选择器从jQuery('#map')更改为jQuery('.map')
将iframe包装div更改为<div id="map-wrapper">
将iframe的jQuery选择器更改为jQuery('#map-wrapper iframe')

使用jquery更改地图地址

2 个答案: