сделать карту Google в другой идентификатор - PullRequest
Новая
       69

сделать карту Google в другой идентификатор

0 голосов
/ 01 мая 2020

есть приложение со множеством вкладок, обновленное Ajax. Каждая вкладка может содержать отдельную карту (на самом деле много карт, но проблему можно описать проще, если рассмотреть одну карту). Проблема в том, что каждый раз, когда я переключаюсь на другую вкладку, карта, которую я там находил, кажется потерянной, потому что, когда я вернусь к этой вкладке позже, карта исчезнет, ​​и мне придется запросить ее снова. Проблема сводится к обновлению соответствующего идентификатора с картой, полученной с помощью «new google.maps.Map (...)»

Проще говоря, я хочу знать, как я могу отобразить карту Google в некоторых другой идентификатор? Я имею в виду что-то вроде этого:

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

renderGoogleMap (myMap, 'id2')

В качестве примера я представляю приведенный ниже код, основанный на коде Google Tutorial, где я добавил новую функцию (renderMap ()), которая запускается после рендеринга карты на 1-м ID. Я хочу знать, как реализовать функцию renderMap, чтобы она отображала карту, хранящуюся в переменной gmap, в идентификаторе map1. 

<!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>

1 Ответ

0 голосов
/ 01 мая 2020

Вам нужна новая карта создания 

 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>
...