javascript - Gmap 在 js 上无法正常工作

Question

我在使用 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>

似乎就在页面的左上角!我该如何解决这个问题？

Answer 1

我正在使用“引导”我的项目。因此，bootstrap 提供了一种方法来执行此操作 shown.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>

输出