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按钮时，将动态创建地图。已加载默认地图，但未加载下一张地图。我该如何解决这个问题，谢谢！

这是my fiddle demo

Answer 1

这是您的代码的working fiddle您的代码出了什么问题，您在窗口加载时打开地图运行initMap( $( '.map' ) );的{{1}}以后你在点击时调用相同的函数没有任何意义，因为这行注册窗口加载事件来运行它的块内部的函数

并在现有地图中添加新地图也无法正常工作，这一切都是希望这可能会有所帮助

这不是完整的代码只是一个想法如何工作

如何动态添加谷歌地图

1 个答案: