Показать несколько карт Google из JSON через цикл - PullRequest
Новая
       9

Показать несколько карт Google из JSON через цикл

0 голосов
/ 26 сентября 2019

Я хочу динамически отображать несколько карт Google без необходимости вводить следующее: 

<div id="map"></div>
<div id="map1"></div>
<div id="map2"></div>

В своем коде ниже я жестко закодировал json и включил 3 объекта широты и долготы.Я сделал цикл, чтобы отобразить 3 карты, когда я повторил 3 объекта.Тем не менее, он показал только 1 карту вместо.Может ли кто-нибудь помочь мне с этой проблемой?Заранее спасибо. 

#map {
  height: 300px;
  width: 500px;
  margin: 0px;
  padding: 0px
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div id="map"></div>

  <script>
    //hardcoded json
    var json = [{
      lat: 51.143183,
      lng: 0.915349
    }, {
      lat: 51.261797,
      lng: 1.087446
    }, {
      lat: 51.286869,
      lng: 0.556317
    }];

    var obj, map, uluru, marker, text = "";

    //init map function
    function initMap() {
      for (var i in json) {
        obj = json[i];

        //txt = "<div id='map'></div>"

        console.log(obj.lat + " " + obj.lng);

        uluru = {
          lat: parseFloat(obj.lat),
          lng: parseFloat(obj.lng)
        };

        map = new google.maps.Map(document.getElementById('map'), {
          center: {
            lat: parseFloat(obj.lat),
            lng: parseFloat(obj.lng)
          },
          zoom: 15
        });

        marker = new google.maps.Marker({
          position: uluru,
          map: map
        });
      }
    }
  </script>

  <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDqKWHQOwdndu3GbTZfxb2HdMS4wDrpBv4&callback=initMap">
  </script>

</body>

</html>

Ответы [ 3 ]

1 голос
/ 26 сентября 2019

Вы должны сохранить каждый инициализированный объект google-maps в отдельном доступном адресе памяти, например, в переменной, элементе массива и т. Д. Попробуйте это: 

var json = [{lat:51.143183, lng: 0.915349}, {lat: 51.261797, lng: 1.087446}, {lat: 51.286869, lng: 0.556317}];

var mapInstances = [];

//init map function
function initMap() {
  json.map(function(jsonObject, index){
    uluru = {lat: parseFloat(jsonObject.lat), lng: parseFloat(jsonObject.lng)};
    mapInstances.push(new google.maps.Map(document.querySelector('#map' + index), {
      center: { lat: parseFloat(jsonObject.lat), lng: parseFloat(jsonObject.lng) },
      zoom: 15
    }));
    var marker = new google.maps.Marker({position: uluru, map: mapInstances[index]});             
  });  
  
  console.log(mapInstances);         
}
div{
  display: inline-block;
  width: 400px;
  height: 400px;
  border: 1px solid;
  margin-right: 8px;
}
<div id="map0"></div>
<div id="map1"></div>
<div id="map2"></div>

<script async src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDqKWHQOwdndu3GbTZfxb2HdMS4wDrpBv4&callback=initMap">
</script>
1 голос
/ 26 сентября 2019

Вы всегда используете один и тот же элемент с идентификатором map в качестве целевого элемента div.

Чтобы решить вашу проблему, вам нужно иметь элемент div для каждой карты, которую вы создали.

Вместо этого создайте новый элемент на каждой итерации, например: 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>
        .map { /* Change style to class instead of id */ 
            height: 300px;
            width: 500px;
            margin: 0px;
            padding: 0px
        }
    </style>
</head>

<body>
    <!-- Make a container div to hold all your maps -->
    <div id="mapContainer">

    </div>

    <script>
        //hardcoded json
        var json = [{ lat: 51.143183, lng: 0.915349 }, { lat: 51.261797, lng: 1.087446 }, { lat: 51.286869, lng: 0.556317 }];

        var obj, map, uluru, marker, text = "";

        //init map function
        function initMap() {
            for (var obj of json) { // Use for ... of instead of for ... in

                // Create element and append it to container
                var node = document.createElement("div");
                    node.classList.add('map'); // Apply the CSS class to the new node
                document.getElementById("mapContainer").appendChild(node); // Append the node to the container

                console.log(obj.lat + " " + obj.lng);

                uluru = { lat: parseFloat(obj.lat), lng: parseFloat(obj.lng) };

                map = new google.maps.Map(node, { // Use created element
                    center: { lat: parseFloat(obj.lat), lng: parseFloat(obj.lng) },
                    zoom: 15
                });

                marker = new google.maps.Marker({ position: uluru, map: map });
            }
        }
    </script>

    <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDqKWHQOwdndu3GbTZfxb2HdMS4wDrpBv4&callback=initMap">
        </script>

</body>

</html>
0 голосов
/ 26 сентября 2019

Вы должны предоставить правильный селектор для рендеринга карты 

var maps;
        //hardcoded json
        var json = [{
          lat: 51.143183,
          lng: 0.915349
        }, {
          lat: 51.261797,
          lng: 1.087446
        }, {
          lat: 51.286869,
          lng: 0.556317
        }];
    
        var obj, map, uluru, marker, text = "";
    
        //init map function
        function initMap() {
          for (var i in json) {
            obj = json[i];
    
            //txt = "<div id='map'></div>"
    
            console.log(obj.lat + " " + obj.lng);
    
            uluru = {
              lat: parseFloat(obj.lat),
              lng: parseFloat(obj.lng)
            };
    var MapSelector = 'map'+(i)
            map = new google.maps.Map(document.getElementById(MapSelector), {
              center: {
                lat: parseFloat(obj.lat),
                lng: parseFloat(obj.lng)
              },
              zoom: 15
            });

            marker = new google.maps.Marker({
              position: uluru,
              map: map
            });
          }
        }
#map0,#map1,#map2{
height: 100px; width: 100%;
margin: 20px;
}
<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
    </head>
    
    <body>
      <div id="map0"></div>
      <div id="map1"></div>
      <div id="map2"></div>
  
    
      <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDqKWHQOwdndu3GbTZfxb2HdMS4wDrpBv4&callback=initMap">
      </script>
    
    </body>
    
    </html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...