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');
 }

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

1 个答案: