如何在同一地圖上使用帶有多個標記的谷歌地圖API

Question

因此，我有以下腳本來使用谷歌地圖API，它的一切正常，但我需要創建一個具有多個標記（氣球形狀的圖標指向某些東西），我需要這些標記中的每一個指向地圖的不同區域（即不同的座標），我該怎麼做？

<script type="text/javascript"> 

     function load() { 

     var map = new GMap2(document.getElementById("map")); 
     var marker = new GMarker(new GLatLng(<%=coordinates%>)); 

     var html="<img src='simplemap_logo.jpg' width='20' height='20'/> " + 
      "<%=maptitle%><br/>" + 
      "<%=text%>"; 



     map.setCenter(new GLatLng(<%=coordinates%>), <%=zoom%>) 
     map.setMapType(G_HYBRID_MAP); 
     map.addOverlay(marker); 
     map.addControl(new GLargeMapControl()); 
     map.addControl(new GScaleControl()); 
     map.addControl(new GMapTypeControl()); 


     marker.openInfoWindowHtml(html); 
     } 

     //]]> 
     </script> 

還有一個問題，如果我通過腳本文本作爲一個變量，可以這樣說：

<script type="text/javascript"> 
<%=ScriptText%> 
</script> 

和我<％= ScriptText％>將是我將建立一個字符串，將其值分配給名爲ScriptText的朋友或公共變量，它是否仍能正常運行？ （我這樣做是爲了讓我的腳本具有動態性，並且基於我如何將它構建爲STRING，這是因爲我在編寫javascripting時的文盲; P）

Answer 1

obeattie和gregers都是對的。在一般情況下，你需要標記參數存儲在某些類型的數組，稍後將在-至少兩次使用方法：將覆蓋到地圖時

2. 將它添加到一個GLatLngBounds對象時計算中心點和縮放級別

的陣列或標誌看起來就像對象的數組，喜歡的東西：

var latlng1 = [ 
    new GLatLng(48.1234, -120.1234), 
    new GLatLng(48.5678, -120.5678), 
    new GLatLng(48.9101, -120.9112), 
    new GLatLng(48.1121, -120.1314), 
    new GLatLng(48.3145, -120.1516), 
    new GLatLng(48.1617, -120.1718), 
    new GLatLng(48.1819, -120.1920), 
    new GLatLng(48.2021, -120.2122) 
]; 

的代碼添加標記WOU類似LD看起來：

// assume that map1 is an instance of a GMap2 object 

    // #0 -- google maps api requires us to call setCenter first before calling any other operation on the map 
    map1.setCenter(new GLatLng(0, 0), 0); 

    // #1 -- add markers 
    for (var i = 0; i < latlng1.length; i++) 
    { 
    var marker = new GMarker(latlng1[ i ]); 
    map1.addOverlay(marker); 
    } 

    // #2a -- calculate center 
    var latlngbounds = new GLatLngBounds(); 
    for (var i = 0; i < latlng1.length; i++) 
    { 
    latlngbounds.extend(latlng1[ i ]); 
    } 

    // #2b -- set center using the calculated values 
    map1.setCenter(latlngbounds.getCenter(), map1.getBoundsZoomLevel(latlngbounds)); 

至於你如何使用客戶端的JavaScript中的服務器端腳本的問題，是你可以將它們混合在一起。通過你的描述來看，我認爲這是你需要做什麼：

<script type="text/javascript"> 
    var latlng1 = new Array(); 
</script> 
<script type="text/javascript"> 
    <% 
     do until rs.eof 
      %> 
      latlng1.push(new GLatLng(parseFloat('<%= rs("Lat") %>'), parseFloat('<%= rs("Lng") %>'))); 
      <% 
      rs.movenext 
     loop 
    %> 
</script> 

我已經張貼在文章：http://salman-w.blogspot.com/2009/03/zoom-to-fit-all-markers-polylines-or.html

Answer 2

您需要爲每個想要創建的地方創建一個新的GMarker在地圖上標記。對於GMarker s有相當好的文檔可用here。

要創建一個GMarker，您將從文檔中看到您首先需要創建一個GLatLng，表示要放置標記的位置。你沒有提到想要在氣球中的任何內容，所以我假設它只是你之後的標記。在你的情況下，代碼可能會是這個樣子：

var markerCoords = [ 
    new GLatLng(<latitude>, <longitude>), 
    new GLatLng(<latitude>, <longitude>), 
    [...] 
]; 

for (coord in markerCoords){ 
    map.addOverlay(new GMarker(coord)); 
}; 

我敢肯定，你也許可以確切說出是怎麼回事，但爲了以防萬一，我創建GLatLng對象的數組（這可能是任何長度[範圍內哈哈]），然後遍歷它，爲數組中定義的每個GLatLng添加標記到映射。

如果您打算創建大量標記，則可能會發現使用Marker Manager會很有用，這將加速渲染大量標記（通過不渲染屏幕外標記和屏幕上的冷凝如果在屏幕的一個區域有很多的話）。

Answer 3

obeattie回答你的問題很不錯。但是從您的示例代碼中，您似乎也希望地圖縮放到包含標記的區域。要使用多個標記執行此操作，您可以創建一個爲每個標記擴展的GLatLngBounds。然後，您可以獲取適合從邊界對象收集標記的中心和縮放。

var markersBounds = GLatLngBounds(); var coord = null; for (coord in markerCoords){ coord = new GMarker(coord); map.addOverlay(); markersBounds.extend(coord); };

var markersCenter = markersBounds.getCenter(); 
var markersZoom = G_HYBRID_MAP.getBoundsZoomLevel(markersBounds); 

map.setCenter(markersCenter, markersZoom); 

我不是100％肯定的G_HYBRID_MAP。 getBoundsZoomLevel，但如果我沒記錯的話，G_HYBRID_MAP是GMapType的一個實例。

Answer 4

我無法編輯自己的帖子（見上文），所以我我會發布一些修訂。它不正是你想要的東西，它只是一個大致的輪廓：

var map; 
var markers = new Array(); 
markers.push(
    { 
     latlng: new GLatLng(parseFloat('47.59'), parseFloat('-120.65')), 
     name: 'Some html here' 
    } 
); 
markers.push(
    { 
     latlng: new GLatLng(parseFloat('48.84'), parseFloat('-122.59')), 
     name: 'Some html here as well' 
    } 
); 
markers.push(
    { 
     latlng: new GLatLng(parseFloat('47.83'), parseFloat('-120.01')), 
     name: 'And some more html...' 
    } 
); 
function create_gmarker(marker) 
{ 
    var gmarker = new GMarker(marker.latlng); 
    GEvent.addListener(gmarker, 'click', function() { 
      gmarker.openInfoWindowHtml(marker.name); 
     } 
    ); 
    return gmarker; 
} 
function initialize_gmap() 
{ 
    if (GBrowserIsCompatible()) 
    { 
     // initialize map etc here and other yada yada 
     for (var i in markers) 
     { 
      map.addOverlay(create_gmarker(markers[ i ])); 
     } 
    } 
} 

上面還演示了JavaScript的[陣列]的天真使用和{}對象的實例。你應該使用一些:)

Answer 5

我有這樣的事情，但事件不起作用。我可以在對象的構造函數中添加偵聽器嗎？

//Localization object onstructor 
function Localization(width, height, description, img_source){ 
    this.point = new GLatLng(width, height); 
    this.marker = new GMarker(this.point); 
    this.description = description; 
    this.img_source = img_source; 
    GEvent.addListener(this.marker, "click", function(){marker.openInfoWindowHtml(this.description);}); 
} 

//map localizations to show on map 
var localizations = [ 
    new Localization(52.9015797, 15.2602200, 'Poznań1', 'eye1'), 
    new Localization(52.9025797, 15.1602200, 'Poznań2', 'eye2'), 
    new Localization(52.9035797, 15.2702200, 'Poznań3', 'eye3'), 
    new Localization(52.9045797, 15.2102200, 'Poznań4', 'eye4'), 
] 

var map = new GMap2(document.getElementById("mapa")); 
map.setCenter(localizations[3].point, 13); 
map.setUIToDefault(); 


for(i=0; i < localizations.length; i++){ 
    localization=localizations[i]; 
    map.addOverlay(localization.marker); 
    localization.marker.openInfoWindowHtml(localization.description); 
}