时间戳

首页 > 解决方案 > 通过循环显示来自json的多个谷歌地图

javascript - 通过循环显示来自json的多个谷歌地图

问题描述

我想动态显示多个谷歌地图而不必输入以下内容：

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

在下面的代码中，我对 json 进行了硬编码，并包含了 3 个纬度和经度对象。当我迭代 3 个对象时，我做了一个循环来显示 3 个地图。但是，它只显示了一张地图。有人可以帮我解决这个问题吗？先感谢您。

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

标签： javascriptarraysgoogle-maps

解决方案

您必须将每个已初始化的 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>

推荐阅读