谷歌地图不会在 JQuery UI 对话框中第二次加载

Question

在我的 ASP.Net 应用程序的按钮的 OnClientClick 中，我调用此函数来显示一个带有 Google Map Inside 的 JQueryUI 对话框。一切都是第一次运行良好。但是，第二次，地图似乎是灰色背景的空白，但是，地图内的所有其他控件都显示出来了。这是我的代码。有什么方法可以在关闭时处理地图，以便我可以在单击下一个按钮时再次重新加载地图。

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
function loadMap()
{

       var currentMapPosition = new google.maps.LatLng($('#<%=txLatitude.ClientID %>').val(), $('#<%= txLongitude.ClientID %>').val()); 
       var mapOptions = {
            center: currentMapPosition,
            zoom: 14,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var infoWindow = new google.maps.InfoWindow();
        var latlngbounds = new google.maps.LatLngBounds();
        var map = new google.maps.Map(document.getElementById("gmap-dialog"), mapOptions);

        var marker = new google.maps.Marker({
            position: currentMapPosition,
            map: map,
            title: 'SubProject Location'
        });
       //collects New Location, and closing dialog on click
        google.maps.event.addListener(map, 'click', function (e) {
            var latitude = e.latLng.lat();
            var longitude = e.latLng.lng();

                  var marker = new google.maps.Marker({
                    position: e.latLng,
                    map: map,
                    title: 'SubProject Location'
                });
                // Center of map
                map.panTo(new google.maps.LatLng(latitude,longitude));
                $('#<%= txLatitude.ClientID %>').val(e.latLng.lat() ) ;
                $('#<%= txLongitude.ClientID %>').val(e.latLng.lng() ) ;

               $("#gmap-dialog").dialog('close');
        });

          $("#gmap-dialog").dialog('open');
}
</script>

问题与live demo 相同。 如果您第二次加载地图，它将是灰色的。我在 Chrome、IE 和 Firefox 中检查过。

Answer 1

我找到了答案。问题是多次初始化地图对象。我全局声明了 map 变量，并且只使用条件初始化了一次，现在它可以正常工作了。

 var map = ''; 
 function loadMap()
 {

       var currentMapPosition = new google.maps.LatLng($('#<%=txLatitude.ClientID %>').val(), $('#<%= txLongitude.ClientID %>').val()); 
       var mapOptions = {
            center: currentMapPosition,
            zoom: 14,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var infoWindow = new google.maps.InfoWindow();
        var latlngbounds = new google.maps.LatLngBounds();
        if(!map){
            map = new google.maps.Map(document.getElementById("gmap-dialog"), mapOptions);
        }
        else{
            map.setOptions(mapOptions);
        }

        var marker = new google.maps.Marker({
            position: currentMapPosition,
            map: map,
            title: 'SubProject Location'
        });

        google.maps.event.addListener(map, 'click', function (e) {
            var latitude = e.latLng.lat();
            var longitude = e.latLng.lng();

                  var marker = new google.maps.Marker({
                    position: e.latLng,
                    map: map,
                    title: 'SubProject Location'
                });
                // Center of map
                map.panTo(new google.maps.LatLng(latitude,longitude));
                $('#<%= txLatitude.ClientID %>').val(e.latLng.lat() ).attr('class', 'modified-textbox');
                $('#<%= txLongitude.ClientID %>').val(e.latLng.lng() ).attr('class', 'modified-textbox');
                  $('#<%= saveButton.ClientID %>').attr('class', 'save-button');

               $("#gmap-dialog").dialog('close');
        });

          $("#gmap-dialog").dialog('open');
 }