如何在单个页面上显示多个自定义 google 地图？

Question

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

为此，我需要执行类似于以下代码的操作。问题是如何将地图名称和坐标列表传递给 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>

Answer 1

实现你想要的关键是要意识到你需要声明多个 contexts/optionsets，每个地图声明一个。我个人的方法是定义一个将您的值作为参数的初始化函数，如下所示：

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

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

Answer 3

首先，由于 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>

如何在单个页面上显示多个自定义 google 地图？

How to show multiple customised google maps on a single page?

javascript

jsp

google-maps

google-maps-api-3

google-maps-markers