谷歌地圖與一個標記中的多個信息

我正在開發一個包含一些關於地方的信息的Web應用程序。這個地方可能有不止一個議程。我可以在一個標記中顯示更多信息，例如堆棧氣球嗎？谷歌地圖與一個標記中的多個信息

這是我的地圖

這是我的數據

也有一些地方是有一個以上的議事日程，我想告訴所有的議程在一個標記中，如果緯度和經度相同。

這是我的代碼顯示標記依賴於數據庫中，我把它放在index.php文件

function load() { 
    var map = new google.maps.Map(document.getElementById("map"), { 
    center: new google.maps.LatLng(-6.270293,106.830995), 
    zoom: 13, 
    mapTypeId: 'roadmap' 
    }); 
    var infoWindow = new google.maps.InfoWindow; 

    // Change this depending on the name of your PHP file 
    downloadUrl("ajax2.php", function(data) { 
    var xml = data.responseXML; 
    var markers = xml.documentElement.getElementsByTagName("marker"); 
    for (var i = 0; i < markers.length; i++) { 
     var name = markers[i].getAttribute("name"); 
     var address = markers[i].getAttribute("address"); 
     var type = markers[i].getAttribute("type"); 
     var materi = markers[i].getAttribute("materi"); 
     var pemateri = markers[i].getAttribute("pemateri"); 
    var tanggal = markers[i].getAttribute("tanggal"); 
    var hari= markers[i].getAttribute("hari"); 
    var jam= markers[i].getAttribute("jam"); 
     var point = new google.maps.LatLng(
      parseFloat(markers[i].getAttribute("lat")), 
      parseFloat(markers[i].getAttribute("lng"))); 
     var html = "<b>" + name + "</b> <br/>" + address + "<br/>" +materi+ " : "+pemateri+ "<br/>"+ hari +" "+tanggal+ " Jam : "+jam; 
     var icon = customIcons[type] || {}; 
     var marker = new google.maps.Marker({ 
     map: map, 
     position: point, 
     icon: icon.icon, 
     shadow: icon.shadow 
     }); 
     bindInfoWindow(marker, map, infoWindow, html); 
    } 
    }); 
} 

function bindInfoWindow(marker, map, infoWindow, html) { 
    google.maps.event.addListener(marker, 'click', function() { 
    infoWindow.setContent(html); 
    infoWindow.open(map, marker); 
    }); 
} 

function downloadUrl(url, callback) { 
    var request = window.ActiveXObject ? 
     new ActiveXObject('Microsoft.XMLHTTP') : 
     new XMLHttpRequest; 

    request.onreadystatechange = function() { 
    if (request.readyState == 4) { 
     request.onreadystatechange = doNothing; 
     callback(request, request.status); 
    } 
    }; 

    request.open('GET', url, true); 
    request.send(null); 
}

可我修改代碼來顯示一些信息，如果經/緯度相同，並顯示在一個氣球上面的標記？

感謝之前

來源

2013-09-29 user2829199

可能的方法去實現它（可能有很多途徑）：

在downloadUrl()
```
var markerContents={};
```
回調的開始的循環，內創建一些對象您創建標記用屬性填充此對象。作爲屬性的名稱分配點的字符串表示（將返回LatLng.toString()）。創建這個字符串的變量：你現在要檢查，如果該屬性已經存在，如果不創建它並將其值設置爲空數組
```
var markerId = point.toString();
```
第一：
```
if(!markerContents[markerId]){ 
    markerContents[markerId] = []; 
}
```
於是，線路後其中創建html，推html到陣列：
```
markerContents[markerId].push(html);
```
，以避免多個標記的創建在相同的位置，離開當前迭代在創建標記之前，當有超過1項數組內：
```
if(markerContents[markerId].length>1){return;}
```
修改bindInfoWindow();通話，傳遞數組作爲參數，而不是HTML
```
bindInfoWindow(marker, map, infoWindow, markerContents[markerId]);
```
修改的點進率Marker（標記）的偵聽器，以便他可以使用陣列的內容作爲InfoWindowContent

 function bindInfoWindow(marker, map, infoWindow, html) { 
     google.maps.event.addListener(marker, 'click', function() { 
     infoWindow.setContent(html.join('<hr/>')); 
     infoWindow.open(map, marker); 
     }); 
    }

在同一位置將不再有多個標記，而是將具有1個標記，其內容設置爲具有此位置的所有標記的html，由水平線定界。

來源

2013-09-29 21:25:23

谷歌地圖與一個標記中的多個信息

回答

相關問題