Jquery对话框中的谷歌地图-InfoWindow元素不起作用

Question

我在jQuery模式对话框中的Google Map（v3）遇到问题。在地图上，我有一个Marker，当点击它时，它会启动一个InfoWindow。InfoWindow有一个文本区域和一个按钮，两者都不起作用。我无法在文本区域中键入，按钮的单击事件也不会触发。我也试过在信息窗口中放一个超链接，但当点击它时也不起作用。

以下是我的代码：

Javascript：

function ShowDialog(dialogID) {
    $("#" + dialogID).dialog({modal: true, resizable: false,
                                minWidth: 400, width: 'auto', maxWidth: 900 });
}
var map;
function ShowMap(address) {
    ShowDialog('MapDialog');
    var options = { zoom: 14, mapTypeId: google.maps.MapTypeId.ROADMAP, 
                    zoomControlOptions: {style: google.maps.ZoomControlStyle.SMALL }};
    map = new google.maps.Map(document.getElementById('map_canvas'), options);            
    var geocoder = new google.maps.Geocoder();
    geocoder.geocode({ 'address': address }, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            map.setCenter(results[0].geometry.location);
            var marker = new google.maps.Marker({ map: map, position: results[0].geometry.location });                    
            var infoHtml = document.getElementById('MapInfoWindow');
            var infoWindow = new google.maps.InfoWindow({ content: infoHtml });
            google.maps.event.addListener(marker, 'click', function () {
                infoWindow.open(map, marker);
                $("#MapInfoWindow").show();
            });
        }
    });
}
function ShowDirections() {
    var start = $("#txtDirectionsStart").val();
    var end = $("#hidAddress").val();
    var request = { 
        origin: start,
        destination: end,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
    };
    var directionsService = new google.maps.DirectionsService();
    var rendererOptions = { map: map }
    var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
    directionsService.route(request, function (response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
        }
    });
}

HTML:

<div id="MapDialog" style="display: none;" class="dialog">
    <table border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td><div style="width:650px;height:500px" id="map_canvas"></div></td>
        </tr>
        <tr>
            <td align="right"><br /><a href="javascript:;CloseDialog('MapDialog')" title="Close"  class="actionButton">Close</a></td>
        </tr>
    </table>
    <div style="display: none" id="MapInfoWindow">
        <strong><asp:Literal ID="litInfoTitle" runat="server"></asp:Literal></strong>
        <p><asp:Literal ID="litInfoAddress" runat="server"></asp:Literal></p>
        <textarea rows="3" cols="50" id="txtDirectionsStart"></textarea>&nbsp;
        <asp:HiddenField ID="hidAddress" runat="server" ClientIDMode="Static" />
        <input type="button" onclick="ShowDirections();" value="Go" />
    </div>
</div>

有人能帮我解决这个问题吗？

Answer 1

我最近遇到了这样的问题，这是由于弹出元素的zIndex不足以出现在jQuery对话框前面（zIndex=1000）。尝试更改infowWindow 的zIndex