Jquery Dialog中的Google Map - InfoWindow元素不起作用

我在jQuery模式對話框中遇到Google Map（v3）的問題。在地圖上我有一個標記，標記點擊時啓動InfoWindow。 InfoWindow有一個textarea和一個按鈕，兩者都不起作用。我無法輸入文本區域，並且按鈕的點擊事件不會觸發。我也嘗試在InfoWindow中放置一個超鏈接，但點擊它時也不起作用。Jquery Dialog中的Google Map - 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>

會有人能夠幫助我解決這個問題呢？

來源

2012-03-19 willfkk

你會得到什麼樣的錯誤，你可以給你正在試圖實現這個頁面的網址。可能是我看到一些JS錯誤 – defau1t 2012-03-19 19:59:28

有沒有任何JS錯誤或任何錯誤的事情。該網站也不公開。如果我將對話框從模態變爲有效。 – willfkk 2012-03-19 20:12:39

我最近有一個像這樣的問題，這是由於彈出元素的zIndex不足以在jQuery對話框（zIndex = 1000）前引起的。嘗試更改infowWindow的zIndex值

來源

2012-04-27 15:18:11 Pascal

Jquery Dialog中的Google Map - InfoWindow元素不起作用

回答

相關問題