2

Google JavaScript API で gmap の読み込みに問題があり、プロジェクトの初期化時に完全に読み込まれません。利用可能なすべてのソリューションを試しましたが、うまくいきませんでした。さらに、ページをリロードまたはサイズ変更すると機能します。

    <script type="text/javascript" src="http://maps.google.com/maps/api/js?key=AIzaSyDWTQpi0GTmb6hoIjbBlcGYfZLAkaDmqLI"></script>
    @Scripts.Render("~/bundles/gmaps")
    <script type="text/javascript">
        $(document).ready(function () {
            var map = new GMaps({
                div: '#gmap_basic',
                lat: 25.261502,
                lng: 55.29155,
                zoom: 15,
                width: '100%',
                height: '300px',

            });
            map.addMarker({
                lat: 25.261502,
                lng: 55.29155,
            });
        })
    </script>

HTML: 

<div class="portlet-body">
    <div id="gmap_basic" class="gmaps"></div>
</div>

ページの左上にあるようです。どうすればこの問題を解決できますか?

ここに画像の説明を入力

4

1 に答える 1

0

プロジェクトの「ブートストラップ」を使用しています。そのため、ブートストラップは、 show.bs.'your element tag'イベントでこれを行うメソッドを提供します。そして、私は問題を解決しました。皆様のお役に立てれば幸いです。

HTML

<div class="portlet-body">
    <div id="gmap_basic" class="gmaps"></div>
</div>

JS

<script type="text/javascript">
        $(document).ready(function () {
            $('#tabGmap').on('shown.bs.tab', function (e) {
                var Lat = 'your map lat';
                var Lon = 'your map lon';
                var map = new GMaps({
                    div: '#gmap_basic',
                    lat: Lat,
                    lng: Lon,
                    zoom: 14,
                    scaleControl: false,
                    width: '100%',
                    height: '300px',
                    center: new google.maps.LatLng(Lat, Lon)

                });
                map.addMarker({
                    title: 'Map title',
                    lat: Lat,
                    lng: Lon
                });
            });
        })

    </script>

出力 ここに画像の説明を入力

于 2015-06-09T08:59:40.613 に答える