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

I'm creating a google map in which markers show a popup on click (infoWindow). Since i'm developing this page on Bootstrap i want to show a modal dialog when users click on infoWindow. Do you know how to do that and how to pass parameters to modal?

我正在创建一个谷歌地图,其中标记显示点击弹出窗口(infoWindow)。由于我在Bootstrap上开发这个页面,我想在用户点击infoWindow时显示一个模态对话框。你知道怎么做以及如何将参数传递给模态吗?

Here is my HTML code:

这是我的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>

Here is my Javascript code:

这是我的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);
});

This triggers the modal when user clicks on infoWindow popup. Now how to pass more parameters to modal dialog? I mean content that i can get from data.city, data.phone and so on... I searched and searched on SO and Google but none seems to be suitable to my code, maybe because i'm trying to trigger the modal from the infoWindow.

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

1 个解决方案

#1

I solved switching to Leaflet map library (based on OpenStreetMap), instead of Google Maps.

我解决了切换到Leaflet地图库(基于OpenStreetMap)而不是Google Maps的问题。

When i add the markers layer to the map, for each marker i bind a popup to which i attach a click event that calls a function (ShowDetails()). That function creates a different modal for every marker.

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

Here is part of my code using Leaflet:

以下是使用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);

Here is my `ShowDetails() function:

这是我的`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");
}

#1