Создайте InfoWindow для кластеризованных маркеров с помощью Google Maps v3

Я разрабатываю карту, которая будет группировать булавки для предотвращения переполненного булавки, но я хотел создать информационное окно, в котором будет отображаться весь маркер, когда я нажимаю на маркер, я пытался помогите мне и узнайте, что я могу сделать это, используя marker.getTitle(), но это не помогает мне, потому что я использую объект makrewithLable и не использую заголовок, мой вопрос: зачем добавлять заголовок к маркеру или как я предпочитаю вместо этого используйте ярлык, чтобы перечислить их в infowindow. вот копия моей работы.Создайте InfoWindow для кластеризованных маркеров с помощью Google Maps v3

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

Спасибо

источник

2012-05-09 jprbest

Что вы имеете в виду 'добавить title'? Вы имеете в виду красную этикетку вашего маркера, не так ли? Я проверил ваш код, и все в порядке. У вас возникли ошибки в консоли JS? Также есть опция 'title', которая является подсказкой для зависания, может быть, это то, что вы хотите? –

нет ярлыка красного цвета, но я хочу добавить название, как var marker = new google.maps.Marker ({ позиция: myLatlng, название: «Hello World!» }); потому что я хочу, чтобы читать все маркеры под кластером, чтобы добавить их в infowindow как: var titles = ""; // Получите все заголовки для (var i = 0; i jprbest

Жесткая часть будет определять, что такое кластер. Вы также имеете в виду для всех маркеров в определенном кластере, чтобы открыть тот же инфоиндуст? –

Основное изменение было titles += markers[i].labelContent + "\n";. (Вы можете использовать точечную нотацию или markers[i]["labelContent"], чтобы вернуться к любому свойству, которое вы установили). Я также изменил часть markers.push(markers), и что при изменении масштаба окно исчезает (потому что номер кластера может измениться) Все остальное выглядело отлично!

http://jsfiddle.net/ErYub/

<!DOCTYPE html> 
<html> 
    <head> 
    <style type="text/css"> 
     html, body, #map { margin: 0; padding: 0; height: 100% } 

.labels { 
    color: red; 
    background-color: white; 
    font-family: "Lucida Grande", "Arial", sans-serif; 
    font-size: 10px; 
    font-weight: bold; 
    text-align: center; 
    width: 90px;  
    border: 2px solid black; 
    white-space: nowrap; 
    } 
    </style> 
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn-history/r315/trunk/markerwithlabel/src/markerwithlabel_packed.js"></script> 
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script> 
    <script type="text/javascript"> 

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) 
    marker = 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(marker); 

    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].labelContent + "\n"; 
} 
//---- 


infowindow.close(); 
infowindow.setContent(titles); //set infowindow content to titles 
infowindow.open(map, info); 

google.maps.event.addListener(map, 'zoom_changed', function() { infowindow.close() }); 

}); 
    } 

    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); 
    </script> 
    </head> 
    <body> 
    <div id="map"></div> 
    <div id="sidebar"></div> 
    </body> 
</html>

источник

2012-05-09 18:31:59

Спасибо, что работает – jprbest

@Heitor Chang, могу ли я добавить ссылку на labelContent? Если да, то как? – Emu

Создайте InfoWindow для кластеризованных маркеров с помощью Google Maps v3

ответ

Смежные вопросы