如何在單個頁面上顯示多個自定義的Google地圖？

我需要在單個頁面上的單獨地圖上顯示多個項目的座標。如何在單個頁面上顯示多個自定義的Google地圖？

要做到這一點，我需要做類似於下面的代碼。問題是如何將地圖名稱和座標列表傳遞給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>

enter image description here

來源

2015-05-01 Daniel Newtown

首先關閉所有，因爲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到CREAD位置的地圖，像這樣：

<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個地圖，這樣的形象：

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>

來源

2015-05-03 01:13:02

謝謝隊友我會嘗試一下，請你也看看這個問題，http：// stackoverflow。com/questions/29982289/how-to-show-items-on-google-map-similar-to-the-way-google-shows-its-results –

@DanielNewtown好的，我儘快看到。 –

我在編碼上顯示錯誤消息「令牌上的語法錯誤，錯位構造」「 –

的關鍵是實現你想要的是要認識到你需要的多重執行緒/ 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>

來源

2015-05-01 03:07:40

代碼不起作用 –

它不工作，我也沒有什麼建議在這裏，但它沒有工作http://stackoverflow.com/questions/22621516/calling-jquery-function-from-jstl-cforeach-function-not-defined-on-page-load –

試試這個解決方案：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>

來源

2015-05-01 03:25:29 HoangHieu

問題是它打印身體多次循環有什麼辦法可以避免它？ –

檢查我的更新回答 – HoangHieu

我也做了什麼在這裏建議，但它沒有工作http://stackoverflow.com/questions/22621516/calling-jquery-function-from-jstl-cforeach-function-not-defined-on-頁面加載 –

如何在單個頁面上顯示多個自定義的Google地圖？

回答

相關問題