如何动态添加谷歌地图

How to add google map dynamically

本文关键字：添加 谷歌地图 动态 何动态      更新时间：2023-09-26

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

这是我的小提琴演示

这是你的代码的工作，你的代码有什么问题，你在窗口加载时打开了一个映射运行google.maps.event.addDomListener( window, 'load', function()的initMap( $( '.map' ) );和稍后您在单击时调用相同的函数，这没有任何意义，因为该行寄存器窗口加载事件以在其块内运行函数

在现有地图中添加新地图也不起作用，希望这能帮助

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

相关文章：