Google地图不会在JQuery UI对话框中第二次加载 [英] Google Map doesn't load second time in JQuery UI dialog

问题描述

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

In the OnClientClick of Button in my ASP.Net Application, I call this function to show a JQueryUI dialog with Google Map Inside. Everything works well for the first time. But, Second time, the map seems to be blank with gray background, But, every other controls inside map are shown. This is my code. Is there any method to dispose the map on close, so that I can reload map again on next button click.

<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>

推荐答案

（'＃<％ = txLatitude.ClientID ％> '）。val（），

('#<%=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'
} ）;
//收集新位置，关闭对话框点击
google.maps.event.addListener（地图，'点击'，功能（e）{
var latitude = e.latLng.lat （）;
var longitude = e.latLng.lng（）;

var marker = new google.maps.Marker（{
position：e.latLng，
地图：地图，
标题：'子项目位置'
}）;
//地图中心
map.panTo（new google.maps.LatLng（纬度，经度） ）;

('#<%= 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（））;

('#<%= txLatitude.ClientID %>').val(e.latLng.lat() ) ;

这篇关于Google地图不会在JQuery UI对话框中第二次加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！