Question

我正在尝试根据repeater control data source中提供的经度和纬度来显示gmap。这是我的代码

<script src="http://maps.google.com/maps/api/js?key=myapikey&sensor=false"
    type="text/javascript"></script>
<script type="text/javascript">
    $('document').ready(function () {
        $('.mapicon').click(function (e) {              
            init($(this).next('.hdnLatitude').val(), $(this).nextAll('.hdnLongitude').val(), $(this).nextAll('.hdnInfoWindow').val());
            $("#popup_container").dialog({ modal: true }, { border: 10 }, { width: 513 }, { height: 450 });
        });
    });
</script>

这是在

中加载gmap的init方法

<script type="text/javascript">

        function init(hdnLatitude, hdnLongitude, hdnInfoWindow) {
            //            alert(hdnLatitude);
            //            alert(hdnLongitude);

            var map = new google.maps.Map(document.getElementById('map'), {
                zoom: 10,
                center: new google.maps.LatLng(hdnLatitude, hdnLongitude),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            });

            var infowindow = new google.maps.InfoWindow();

            var marker, i;

            var image = 'images/map-icon.gif';
            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(hdnLatitude, hdnLongitude),
                map: map,
                icon: image
            });

            var infoWindow = new google.maps.InfoWindow();

            google.maps.event.addListener(marker, 'click', function () {
                infoWindow.setContent(hdnInfoWindow);
                infoWindow.open(map, marker);
            });

        }
    </script>

这是HTML

<div id="popup_container" style="display: none;">
        <div id="map" style="width: 500px; height: 400px;">
        </div>
    </div>

问题是当第一次点击mapicon然后gmap正确显示但之后在每个调用弹出窗口打开但地图出现四分之一且标记没有正确显示。

被修改

不幸的是，我没有得到一个答案，或者可能我的问题对于SO用户来说并不清楚。

我已经制作了一个测试页面，您可以查看确切的问题。

首次点击其显示的完美地图，但当您关闭弹出窗口时，请再次点击gmap然后弹出窗口，但gmap显示四分之一。

this is link of test page

Answer 1

最后通过在对话框打开方法中进行一些更改或调整来解决问题

最初使用$("#popup_container").dialog({ autoOpen: false });代替

style=display:none在页面加载时未显示弹出窗口。

第二次更改我打开弹出窗口使用此方法调用open方法

$('#popup_container').dialog('open');

然后我调用init()方法

问题解决了。

这是最终的document.ready方法

<script type="text/javascript">
        $('document').ready(function () {
            $("#popup_container").dialog({ autoOpen: false });
            $('#gmap').click(function () {
                $('#popup_container').dialog('open');
                $("#popup_container").dialog({ modal: true }, { border: 10 }, { width: 500 }, { height: 340 });
                init();
            });
        });
    </script>

gmap在jquery对话框中一次加载后显示四分之一

1 个答案: