0

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

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

问题是当第一次单击时mapicongmap 正确显示，但之后在每次调用弹出窗口中打开但地图出现四分之一并且标记未正确显示。

已编辑

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

我制作了一个测试页面，您可以在其中检查确切的问题。

第一次点击它显示完美的地图但是当你关闭弹出窗口一次又一次点击gmap然后弹出窗口打开但gmap显示四分之一。

这是测试页面的链接

4

1 回答 1

0

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

最初使用 $("#popup_container").dialog({ autoOpen: false });而不是

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

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

$('#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>
于 2012-07-30T21:18:41.740 回答