gpt4 book ai didi

javascript - 如何在一个页面上显示多个自定义的谷歌地图?

转载 作者:行者123 更新时间:2023-12-03 10:13:53 25 4
gpt4 key购买 nike

我需要在单个页面上的不同 map 上显示多个项目的坐标。

为了实现这一点,我需要执行类似于下面代码的操作。问题是如何将 map 名称和坐标列表传递给 JavaScript?

我可以传递的值是以下三个值

    ${location.lat}
${location.long}
${location.mapName}

JSP

我循环遍历列表以显示每个位置的名称,我还尝试将每个 map 的 ID 设置为彼此不同。

<c:forEach var="location" items="${locations}">
<div id="item">
<h1>${location.name}</h1>
<div id="${location.mapName}"></div>
</div>
</c:forEach>

<script>
...
var myOptions = {
zoom: 14,
center: new google.maps.LatLng(0.0, 0.0),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);

map2 = new google.maps.Map(document.getElementById("map_canvas2"),
myOptions);
}

</script>

enter image description here

最佳答案

首先,从Location开始是一个java对象,你不能有一个名为long的属性。另外,<div id="item">相反forEach将在 DOM 上生成具有重复 id 的对象。

为了测试,我创建了一个 Location像这样的对象:

public class Location {

private double lat;
private double lng;
private String mapName;

private String name;

// getters and setters

}

简单来说,只需迭代locations即可将位置写入 map ,如下所示:

<c:forEach var="location" items="${locations}">
<h5>${location.name}</h5>
<div id="${location.mapName}" style="height: 180px; width: 400px;"></div>
</c:forEach>

并迭代生成 map 对象、标记等,如下所示:

<c:forEach var="location" items="${locations}">
var latLng_${location.mapName} = new gm.LatLng(${location.lat}, ${location.lng});
var options_${location.mapName} = {
zoom: 14,
center: latLng_${location.mapName},
mapTypeId: gm.MapTypeId.TERRAIN
};

var ${location.mapName} = new gm.Map(document.getElementById("${location.mapName}"), options_${location.mapName});

var marker_${location.mapName} = new gm.Marker({
title: "${location.name}",
position: latLng_${location.mapName},
map: ${location.mapName}
});
</c:forEach>

如果需要,您可以将其包含在函数中。在测试中我生成了 4 张 map ,如下图所示:

Test with multiple maps

这是整个 JSP:

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>

<script type="text/javascript">
var gm = google.maps;
function initialize() {
<c:forEach var="location" items="${locations}">
var latLng_${location.mapName} = new gm.LatLng(${location.lat}, ${location.lng});
var options_${location.mapName} = {
zoom: 14,
center: latLng_${location.mapName},
mapTypeId: gm.MapTypeId.TERRAIN
};

var ${location.mapName} = new gm.Map(document.getElementById("${location.mapName}"), options_${location.mapName});

var marker_${location.mapName} = new gm.Marker({
title: "${location.name}",
position: latLng_${location.mapName},
map: ${location.mapName}
});
</c:forEach>
}

gm.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<c:forEach var="location" items="${locations}">
<h5>${location.name}</h5>
<div id="${location.mapName}" style="height: 180px; width: 400px;"></div>
</c:forEach>
</body>
</html>

关于javascript - 如何在一个页面上显示多个自定义的谷歌地图?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29980862/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com