Question

我创建了一个谷歌地图，其中标记显示点击弹出窗口（infoWindow）。由于我在Bootstrap上开发这个页面，我想在用户点击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);
});

当用户点击infoWindow弹出窗口时，这会触发模态。现在如何将更多参数传递给模态对话框？我的意思是我可以从data.city，data.phone等获得的内容...... 我搜索和搜索了SO和Google，但似乎没有一个适合我的代码，可能是因为我试图从infoWindow触发模态。

Answer 1

我解决了切换到Leaflet地图库（基于OpenStreetMap）而不是谷歌地图。

当我将标记图层添加到地图时，对于每个标记我绑定一个弹出窗口，我附加了一个调用函数的单击事件（ShowDetails()）。该函数为每个标记创建不同的模态。

以下是使用Leaflet的代码的一部分：

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");
}

如何将参数从infoWindow传递到模态对话框？

1 个答案: