将谷歌地图呈现为其他 ID答案

【问题标题】：render a google map into other id将谷歌地图呈现为其他 ID
【发布时间】：2020-05-01 16:07:34
【问题描述】：

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

简单地说，我想知道如何以其他 ID 呈现 Google 地图？我的意思是这样的：

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

renderGoogleMap(myMap, 'id2')

作为示例，我根据 Google 的教程代码展示下面的代码，其中我添加了一个新函数 (renderMap())，该函数在第一个 ID 上的地图渲染后触发。我想知道的是如何实现 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>

【问题讨论】：

标签： google-maps render

【解决方案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>

【讨论】：

是的，这解决了问题，并且是我当前的实现。我想知道的是我是否可以重用 gmap 变量以将其呈现在另一个 id 中。您的回答表明，地图请求与一个且只有一个 ID 相关联。我想知道的是如何（如果可能的话）将 gmap 变量呈现为不同的 ID（1：n）。我搜索了几天没有成功。也许我正在搜索错误的单词，但我不知道哪些是正确的。我是否可以假设 Google Maps API V3 不提供此功能？
在 div 中完成地图的创建（渲染），并且 cration 返回一个对象以引用 div 中显示的地图 .. 所以你不能在两个 div 中使用相同的对象 .. . 因为地图对象不是渲染的图像，而是一个“地图对象” .. 如果你需要，你可以在两个地图之间绑定一些属性（eahc 一个与一个 div 相关）......希望很清楚......