将 google 映射渲染到其他 id

Question

有一个包含许多选项卡的应用程序更新为 Ajax。每个选项卡可能包含不同的地图（实际上有很多地图，但考虑到一张地图可以更容易地描述问题）。问题是每次我切换到另一个选项卡时，我在那里的地图似乎丢失了，因为当我稍后 return 到那个选项卡时，地图消失了，我不得不再次请求它。问题减少到用“new google.maps.Map(...)”

获得的地图更新相应的id

简单地说，我想知道如何在其他 id 中渲染 Google 地图？我的意思是这样的：

myMap = new google.maps.Map(document.getElementById(‘id1’), mapOpt);

渲染Google地图(myMap, 'id2')

作为示例，我根据 Google 的教程代码展示了下面的代码，我在其中添加了一个新函数 (renderMap())，该函数在渲染地图后触发第一个身份证。我想知道的是如何实现 renderMap 函数，以便它渲染存储在“map1”id 上的 gmap 变量中的地图。

<!DOCTYPE html>
<html>
    <head>
        <title>Simple Map</title>
        <meta name="viewport" content="initial-scale=1.0">
        <meta charset="utf-8">
        <style>
            #map {
                width: 360px;
                height: 240px;
                background-color: grey;
            }
            #map1 {
                width: 360px;
                height: 240px;
                background-color: grey;
            }
            html, body {
                height: 100%;
                margin: 0;
                padding: 0;
            }
        </style>
    </head>
    <body>
        <div id="map"></div>
        <div id="map1"></div>
        <script>
            var gmap;
            function renderMap() {
            // renders the GoogleMap "gmap" on ’map1’ id
            }
            function initMap() {
                gmap = new   google.maps.Map(document.getElementById('map'), {
                center: {lat: -34.397, lng: 150.644},
                zoom: 8
                });
            renderMap();
            } 
        </script>
        <script src="https://maps.googleapis.com/maps/api/js?key=myKey&callback=initMap"
                    async defer></script>
    </body>
</html>

Answer 1

您需要一个新的创建地图

 myMap = new google.maps.Map(document.getElementById('id1'), mapOpt);

 myMap2 =new google.maps.Map(document.getElementById('id2'), mapOpt);

.

<body>
    <div id="map"></div>
    <div id="map1"></div>
    <script>
        var gmap;
        var gmap1;

        function renderMap(aMapID) {
            return google.maps.Map(aMapID, {
                center: {lat: -34.397, lng: 150.644},
                zoom: 8
            });
        }
        function initMap() {
            gmap1 = renderMap(document.getElementById('map'));
            gmap2 = renderMap(document.getElementById('map1'));
        }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=myKey&callback=initMap"
                async defer></script>
</body>

将 google 映射渲染到其他 id

render a google map into other id

google-maps

render