如何將參數從infoWindow傳遞給模態對話框？

我正在創建一個谷歌地圖，其中標記在點擊（infoWindow）上顯示一個彈出窗口。由於我在Bootstrap上開發這個頁面，我想在用戶點擊infoWindow時顯示一個模式對話框。你知道如何做到這一點，以及如何將參數傳遞給模態？如何將參數從infoWindow傳遞給模態對話框？

這裏是我的HTML代碼：

<div class="modal fade" id="userDetails" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
     <div class="modal-dialog"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
         <h4 class="modal-title" id="userDetailsTitle"></h4> 
       </div> 
       <div class="modal-body"> 
         <p id="userDetailsDesc"></p> 
       </div> 
       <div class="modal-footer"> 
         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
       </div> 
      </div> 
    </div> 
</div>

這裏是我的Javascript代碼：

google.maps.event.addListener(marker, "click", function (e) { 
    infoWindow.setContent("<div id='info' data-toggle='modal' data-target='#userDetails'><p id='title'>" + data.title + "</p><p>" + data.desc + "</p></div>"); 
    infoWindow.open(map, marker); 
});

這會觸發模式，當用戶點擊信息窗口彈出。現在如何將更多參數傳遞給模態對話框？我的意思是我可以從data.city，data.phone，data.phone等等獲得的內容... 我在SO和Google上搜索和搜索，但似乎沒有一個適合我的代碼，也許是因爲我試圖從infoWindow觸發模式。

來源

2015-05-04 smartmouse

可以在此添加更多的細節。 infoWindow是指什麼？ – wallop

你解決了嗎？ – doxsi

是的，請參考我的回答。對不起，延遲...我希望你仍然需要它。 – smartmouse

我解決了切換到Leaflet地圖庫（基於OpenStreetMap），而不是谷歌地圖。

當我將標記圖層添加到地圖上時，對於每個標記，我綁定一個彈出窗口，附加一個調用函數的單擊事件（ShowDetails()）。該函數爲每個標記創建一個不同的模態。

下面是使用單張我的代碼部分：

var markers = new L.MarkerClusterGroup({showCoverageOnHover: true, maxClusterRadius: 64}); 
for (var i = 0; i < users.length; i++) { 
    (function (cluster, user) { 
    var marker = L.marker([user.lat, user.lon], {icon: iconOff}); 

    var myPopup = L.DomUtil.create('div', 'infoWindow'); 
    myPopup.innerHTML = "<div class='info'><p id='title'>" + user.name + "</p><p>" + user.city + "</p></div>"; 

    marker.bindPopup(myPopup); 

    markers.addLayer(marker); 

    $(myPopup).on('click', function() { showDetails(user); }); 
    })(markers, users[i]); 
} 
map.addLayer(markers);

這裏是我的`ShowDetails（）函數：

function showDetails(user) { 
    $("#userName").html(user.name).html(); 

    $("#userCity").html(user.city).html(); 

    if (user.description) 
    $("#userDesc").html(user.description).html(); 

    if (user.phone) { 
    $("#userTel").show(); 
    $("#userTel a").html(user.phone).html(); 
    $("#userTel a").attr("href", "tel:" + user.phone); 
    } 

    if (user.email) { 
    $("#userEmail").show(); 
    $("#userEmail a").html(user.email).html(); 
    $("#userEmail a").attr("href", "mailto:" + user.email); 
    } 

    $("#userDetails").modal("show"); 
}

來源

2015-09-16 17:19:58 smartmouse

如何將參數從infoWindow傳遞給模態對話框？

回答

相關問題