混雑したピンを避けるためにピンをクラスタリングするマップを開発しましたが、マーカーをクリックするとすべてのマーカーをリストするインフォウィドウを作成したいと思いました私はmakrewithLableオブジェクトを使っていてtitleを使わないので、marker.getTitle()を使って行うことができますが、これは助けにならないことがわかりました。私の質問は、マーカーにタイトルを追加する理由代わりにラベルを使用して情報ウィンドウに一覧表示することができます。 ここに私の作品のコピーです。Google Maps v3を使用してクラスタ化マーカーのInfoWindowを作成する
google.setOnLoadCallback(initialize);
var globalMarker = [];
var map;
function initialize() {
var center = new google.maps.LatLng(45.4214, -75.6919);
map = new google.maps.Map(document.getElementById('map'), {
zoom: 3,
center: center,
disableDoubleClickZoom: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var markers = [];
var infowindow = new google.maps.InfoWindow();
for(i=0; i<50; i++) {
var latLng = new google.maps.LatLng(center.lat() + Math.random() - 0.5, center.lng() + Math.random() - 0.5);
//var latLng = new google.maps.LatLng(45.4214, -75.6919)
markers[i] = new MarkerWithLabel({
position: latLng,
draggable: true,
raiseOnDrag: true,
map: map,
labelContent: "Marker ID = "+i,
labelAnchor: new google.maps.Point(30, 0),
labelClass: "labels", // the CSS class for the label
labelStyle: {opacity: 0.75}
});
markers.push(markers);
makeDiv(i, 15, "Marker #");
google.maps.event.addListener(markers[i], 'click', function(e) {
infowindow.setContent('Marker postion: ' + this.getPosition());
infowindow.open(map, this);});
}
var clusterOptions = { zoomOnClick: false }
var markerCluster = new MarkerClusterer(map, markers, clusterOptions);
globalMarker = markers.slice();
google.maps.event.addListener(markerCluster, 'clusterclick', function(cluster) {
var content = '';
// Convert lat/long from cluster object to a usable MVCObject
var info = new google.maps.MVCObject;
info.set('position', cluster.center_);
//----
//Get markers
var markers = cluster.getMarkers();
var titles = "";
//Get all the titles
for(var i = 0; i < markers.length; i++) {
titles += markers[i].getTitle() + "\n";
}
//----
infowindow.close();
infowindow.setContent(titles); //set infowindow content to titles
infowindow.open(map, info);
});
}
function makeDiv(index, zoomLevel, content) {
document.getElementById("sidebar").innerHTML += '<div onclick="zoomIn(' + index + ',' + zoomLevel + ')">' + content + ' ' + index + '</div>';
}
function zoomIn(index, zoomLevel) {
map.setCenter(globalMarker[index].getPosition());
map.setZoom(zoomLevel);
}
google.maps.event.addDomListener(window, 'load', initialize);
は、キー変更がtitles += markers[i].labelContent + "\n";
た
あなたは何を意味する 'title'を追加しますか?あなたのマーカーの赤い色のラベルがないことを意味しますか?私はあなたのコードをテストし、それは問題ありません。 JS Consoleでエラーが発生しましたか?また、あなたが望むのは、ホバーのツールチップである 'title'オプションもあります。 –
赤色のラベルはありませんが、var marker = new google.maps.Marker({ position:myLatlng、 タイトル: "Hello World!" })のようなタイトルを追加します。クラスタの下にあるすべてのマーカーを読み取ってインフォウィンドウに追加できるようにしたいからです:var titles = ""; //すべてのタイトルを取得する (var i = 0; i
jprbest
難しい部分はクラスタの定義になります。また、定義されたクラスタ内のすべてのマーカーが同じ情報ウィンドウを開くことを意味しますか? –