Question

我有一个实验，用bootstrap创建多张卡片，其中每张卡片都有一个按钮，用于在bootstrap模式下的面板折叠内显示简单的谷歌地图。

在html方面，每个按钮都有数据属性，用于传递要在同一模态div上渲染的经度和纬度数据。

<a href="#" class="btn btn-md" data-toggle="modal" data-frame="iframe" data-target="#workshopModal" data-theVideo="https://www.youtube.com/embed/1KOBVZMJkgY" data-lat="-6.349931" data-lng="106.899435" >Detail</a>

<a href="#" class="btn btn-md" data-toggle="modal" data-frame="iframe" data-target="#workshopModal" data-theVideo="https://www.youtube.com/embed/W3qoutZ_mEs" data-lat="-7.349931" data-lng="107.899435" >Detail</a>

问题：

当我点击第一张卡片细节按钮时，lat和lng参数被正确解析，并且地图显示为我所期望的。

但是当我点击另一个细节按钮时，lat和lng参数不会改变，仍然显示先前的lat和lng值的先前地图。

我正在尝试提交另一个值并通过提示lat，lng和videoSRC值来调试它。 videoSRC值正在变化，但不是lat和lng。

请帮我解决此问题，非常感谢您的帮助

以下是我网页上的JQuery示例代码：

$(document).ready(function(){
      function initialize(lat,lng) {
        var mapProp = {
          center:new google.maps.LatLng(lat, lng),
          zoom:15,
          scrollwheel:false,
          draggable:false,
          mapTypeId:google.maps.MapTypeId.ROADMAP
        };

        var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);

        var marker = new google.maps.Marker({
          position:new google.maps.LatLng(lat, lng),
        });

        marker.setMap(map);

        //google.maps.event.addDomListener(window, 'load', initialize);
        /*google.maps.event.addListener(marker, 'click', function() {
          var_infowindow.open(map,marker);
        });*/
      }




      function loadingModal(){
        var trigger = $("body").find('[data-toggle="modal"]');
        trigger.click(function() {
          var theFrame = $(this).data( "frame" );
          var theModal = $(this).data( "target" );

          var lat = parseFloat($(this).attr("data-lat"));
          var lng = parseFloat($(this).attr("data-lng"));
          videoSRC = $(this).attr( "data-theVideo" );

          $("[id*=workshopModal]").on('hidden.bs.modal', function () {
            $("[id*=workshopModal] "+ theFrame).removeAttr('src');
            //google.maps.event.clearListeners(map, 'bounds_changed');
            $('.panel-collapse.in').collapse('hide');
            $('.panel-collapse:not(".in")').collapse('hide');
          });

          $("#workshopModal").on("shown.bs.collapse", function () {
            alert(lat+' '+lng+' '+videoSRC);
            initialize(lat,lng);
            google.maps.event.addDomListener(window, 'load', initialize);
            google.maps.event.trigger(map, "resize");
          });


        });
      }

      loadingModal();
    });

如何在同一个div

0 个答案: