显示从json到循环的多个谷歌地图

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

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

您始终使用与目标div 相同的元素，其 idmap。

要解决您的问题，您需要为您创建的每张地图都有一个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>

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

您必须为地图渲染提供正确的选择器

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>

相关内容

最新更新

热门标签：