如何动态添加谷歌地图

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