如何動態添加谷歌地圖

Question

我正在嘗試將Google MAP API v3與以下代碼一起使用。

<html>
<head>
    <title></title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=drawing"></script>
    <script type="text/javascript">
    jQuery( function( $ ) 
    {
        var i = 1;

        initMap( $( '.map' ) );

        function initMap( $map )
        {
            google.maps.event.addDomListener( window, 'load', function()
            {
                var myOptions = {
                    center: new google.maps.LatLng( -16.920334, 145.770859 ),
                    zoom: 12,
                };
                var drawingManager = new google.maps.drawing.DrawingManager();
                var map = new google.maps.Map( $map[0], myOptions );
                drawingManager.setMap( map );
            } );
        }

        $( 'body' ).on( 'click', '.add-map', function()
        {
            i++;
            $( '.maps' ).append( '<div class="map-' + i + '" style="width: 800px; height: 500px;"></div>' );
            initMap( $( '.map-' + i ) );
        } );
    } );
    </script>
</head>
<body>
    <input type="button" class="add-map" value="Add Map">
    <div class="maps">
        <div class="map" style="width: 800px; height: 500px;"></div>
    </div>
</body>
</html>

我想做的是，當用戶單擊“ Add Map按鈕時，將動態創建地圖。 默認地圖已加載，但下一個地圖未加載。 我該如何解決此問題，謝謝！

這是我的小提琴演示

Answer 1

這在您的代碼中起作用，您的代碼有什么問題呢？您是通過initMap( $( '.map' ) ); . initMap( $( '.map' ) );在窗口加載時打開地圖的initMap( $( '.map' ) ); 哪個運行google.maps.event.addDomListener( window, 'load', function() ，之后您在單擊時調用沒有意義的相同函數，因為此行注冊window load事件以在塊內運行函數

並在現有地圖中附加新地圖也無法正常工作，這一切都希望能有所幫助

這不是完整的代碼，只是一個想法如何工作

如何動態添加谷歌地圖

問題描述

1 個解決方案

解決方案1
1 已采納 2015-12-11 13:09:38

如何動態添加谷歌地圖

問題描述

1 個解決方案

解決方案1 1 已采納 2015-12-11 13:09:38

解決方案1
1 已采納 2015-12-11 13:09:38