按钮单击时的 setTimeout 事件不起作用

Question

嘿，伙计们，我正在尝试到达单击此按钮时的位置，setTimeout 函数将启动并以模态显示谷歌地图。现在，每当我单击按钮时，模态都会卡住显示加载 gif。任何有关如何解决此问题的想法将不胜感激！ （我必须在加载时将地图放在计时器上，否则它只会加载到模式的左上角。）

按钮：

<p><a id ="hammondButton" data-toggle="modal" href="#HmapModal" class="btn btn-de
fault"><b>View Map &raquo;</b></a></p>

代码：

<!-- Hammond Modal -->
    <div class="modal fade" id="HmapModal" tabindex="-1" role="dialog" aria-labelledby="HmapModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header" align="center">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h2 class="modal-title">Hammond Location</h2>
                </div>
                <div class="modal-body">
                    <div id="loadingGif" style="position: fixed; margin-left: 14%; margin-top: 15%;" ><img src="~/Content/Images/LGIF.gif" /></div>
                    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
                    <div style="overflow:hidden;height:500px;width:578px;">
                        <div id="gmap_canvas" style="height:500px;width:578px;"></div>
                        <style>
                            #gmap_canvas img {
                                max-width: none !important;
                                background: none !important;
                            }
                        </style><a class="google-map-code" href="http://www.map-embed.com" id="get-map-data">www.map-embed.com</a>
                    </div>
                    <script type="text/javascript">
                        $("#hammondButton").button().click(function () {
                            setTimeout(function init_map() {
                                google.maps.event.trigger(map, 'resize');
                                var myOptions = {
                                    zoom: 13,
                                    center: new google.maps.LatLng(30.4900271, -90.4629746),
                                    mapTypeId: google.maps.MapTypeId.ROADMAP
                                };
                                map = new google.maps.Map(document.getElementById("gmap_canvas"), myOptions);
                                marker = new google.maps.Marker({ map: map, position: new google.maps.LatLng(30.4900271, -90.4629746) });
                                google.maps.event.addListener(marker, "click", function() { infowindow.open(map, marker); });
                                infowindow.open(map, marker);
                            }, 2500);
                            google.maps.event.addDomListener(window, 'load', init_map);
                            google.maps.event.trigger(map, 'resize');
                        });
                    </script>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal" onclick="window.location.href=window.location.href">Close</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

Answer 1

在您的代码中，您没有提供 google API 密钥。

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE"></script>

如果你想使用<a>，在你的java脚本中写下以下内容。

$("#hammondButton").button().click(function () {
 event.preventDefault();
}

否则， 只需使用按钮而不是<a>.

<button id="HmapModal" data-toggle="modal" data-target="HmapModal"></button>

然后在java脚本中添加点击

$("#hammondButton").click(function () {
                            setTimeout(function init_map() {
                                google.maps.event.trigger(map, 'resize');
                                var myOptions = {
                                    zoom: 13,
                                    center: new google.maps.LatLng(30.4900271, -90.4629746),
                                    mapTypeId: google.maps.MapTypeId.ROADMAP
                                };
                                map = new google.maps.Map(document.getElementById("gmap_canvas"), myOptions);
                                marker = new google.maps.Marker({ map: map, position: new google.maps.LatLng(30.4900271, -90.4629746) });
                                google.maps.event.addListener(marker, "click", function() { infowindow.open(map, marker); });
                                infowindow.open(map, marker);
                            }, 2500);
                            google.maps.event.addDomListener(window, 'load', init_map);
                            google.maps.event.trigger(map, 'resize');
                        });

Answer 2

我现在所能提供的只是一些清理过的代码，不确定它会进一步得到多少（如果有的话），但它就在这里。

<script type="text/javascript">
    var loc = new google.maps.LatLng(30.4900271, -90.4629746),
        myOptions = {
            zoom: 13,
            center: loc,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        },
        map = new google.maps.Map(document.getElementById("gmap_canvas"), myOptions),
        marker = new google.maps.Marker({
            map: map,
            position: loc
        });

    function init_map() {
        $("#hammondButton").click(function () {
            google.maps.event.addListener(marker, "click", function() {
                infowindow.open(map, marker);
            });

            // is this necessary?
            google.maps.event.trigger(map, 'resize');
        });

    }

    window.addEventListener("load", init_map);
</script>