Question

我在jQuery模式对话框中遇到了Google Map（v3）的问题。在地图上我有一个标记，标记在点击时启动InfoWindow。 InfoWindow有一个textarea和一个按钮，两者都没有工作。我无法输入文本区域，并且按钮的单击事件不会触发。我也试过在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

我最近有一个像这样的问题是由弹出元素的z索引引起的，这个元素不足以在jQuery对话框前面（zIndex = 1000）。尝试更改信息窗口的zIndex

Jquery对话框中的Google Map - InfoWindow元素无效

1 个答案: