0

で利用可能な経度と緯度に基づいてgmapを表示しようとしていますrepeater control data source.hereは私のコードです

<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 が正しく表示されますが、その後はすべての呼び出しでポップアップが開きますが、マップが 4 分の 1 表示され、マーカーが正しく表示されません。

編集済み

残念ながら、私は単一の回答を得ていないか、私の質問が SO ユーザーに明確ではない可能性があります。

正確な問題を確認できるテスト ページを作成しました。

最初のクリックで完璧な地図が表示されますが、ポップアップを閉じてもう一度クリックするとgmap、ポップアップが開きますが、gmap4 分の 1 が表示されます。

テストページのリンクです

4

1 に答える 1

0

最後に、ダイアログを開く方法にいくつかの変更または調整を加えることで問題が解決しました

最初は の $("#popup_container").dialog({ autoOpen: false });代わりに を使用します

style=display:none ページの読み込み時にポップアップを表示しないため。

2 番目の変更は、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>
于 2012-07-30T21:18:41.740 に答える