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

我需要在单个页面上的不同 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/

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

上一篇：javascript - 将 Google 图表下载为 jpeg 而不是 png？

下一篇：javascript - 通过 XMLHttpRequest 转换日期