如何在单个页面上显示多个自定义谷歌地图？答案

【问题标题】：How to show multiple customised google maps on a single page?如何在单个页面上显示多个自定义谷歌地图？
【发布时间】：2015-05-01 02:33:33
【问题描述】：

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

为此，我需要执行类似于以下代码的操作。问题是如何将地图名称和坐标列表传递给 JavaScript？

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

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

JSP

我遍历列表以显示每个位置的名称，我还尝试将每个地图的 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>

【问题讨论】：

标签： javascript google-maps jsp google-maps-api-3 google-maps-markers

【解决方案1】：

首先，因为Location 是一个java 对象，所以你不能有一个名为long 的属性。此外，<div id="item"> insede forEach 将在 DOM 上生成具有重复 ID 的对象。

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

public class Location {

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

    private String name;

    // getters and setters

}

以一种简单的方式，只需遍历 locations 以将位置添加到地图中，如下所示：

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

然后迭代生成地图对象、标记等等，像这样：

<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 张地图，如下图所示：

这是整个 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>

【讨论】：

谢谢队友，我会试试的，请你也看看这个问题，stackoverflow.com/questions/29982289/…
@DanielNewtown 好的，我尽快看到。
我正在处理它在上显示错误消息的代码“令牌语法错误，结构错误”
@DanielNewtown 您是否修改了代码或正在测试，如本答案所示？
原样，但显示错误，我刚刚发现它忽略了错误但没有找到元素。

【解决方案2】：

试试这个解决方案：3 ...我希望这会有所帮助。

<script>
function insertMarker(lat, lng, mapname){
var myOptions = {
    zoom: 14,
    center: new google.maps.LatLng(lat, lng),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
    "map_"+ mapname = new google.maps.Map(document.getElementById(mapname),
                                myOptions);    
}
}
</script>

<c:forEach var="location" items="${locations}">

    <div id="item">
          <h1>${location.name}</h1>
          <div id="${location.mapName}"></div>      
    </div>
    <script>
         insertMarker(0.0, 0.0, "<%=location.mapName%>");
    </script>
</c:forEach>

【讨论】：

问题是它多次打印循环体有什么办法可以避免吗？
我也做了这里的建议，但没有用stackoverflow.com/questions/22621516/…

【解决方案3】：

实现您想要的关键是要意识到您需要声明多个上下文/选项集，每个映射一个。我个人的方法是定义一个初始化函数，将您的值作为参数，如下所示：

<script type="text/javascript">
     var maps = [];
     function InitMap(latitude,longitude,container) {
          var myOptions = {
              zoom: 14,
              center: new google.maps.LatLng(latitude, longitude),
              mapTypeId: google.maps.MapTypeId.ROADMAP
          }
          maps.push(
              new google.maps.Map(
                  document.getElementById(container),
                  myOptions)
          );
     }
</script>

<c:forEach var="location" items="${locations}">
    <div id="item">
      <h1>${location.name}</h1>
      <div id="${location.mapName}"></div> 
      <script type="text/javascript">
          InitMap(${location.lat}, ${location.long}, '${location.mapName}');
      </script>
   </div>
</c:forEach>

【讨论】：

它不起作用，我也做了这里的建议但它不起作用stackoverflow.com/questions/22621516/…