tạo InfoWindow cho các điểm đánh dấu phân cụm bằng cách sử dụng Google Maps v3

Tôi đang phát triển một bản đồ để sắp xếp các chốt để ngăn chặn pin quá đông, nhưng tôi muốn tạo một infoWindow sẽ liệt kê tất cả điểm đánh dấu khi tôi nhấp vào điểm đánh dấu nhận được một số trợ giúp xung quanh và phát hiện ra tôi có thể làm điều đó bằng cách sử dụng marker.getTitle() nhưng điều này không giúp tôi bởi vì tôi sử dụng đối tượng makrewithLable và không sử dụng tiêu đề, câu hỏi của tôi là có bất kỳ lý do tại sao để thêm tiêu đề để đánh dấu hoặc như tôi thích để sử dụng nhãn thay vì liệt kê chúng trong infowindow. đây là bản sao tác phẩm của tôi.tạo InfoWindow cho các điểm đánh dấu phân cụm bằng cách sử dụng 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);

Cảm ơn bạn

Nguồn

2012-05-09 jprbest

Ý anh là gì 'thêm một title'? Bạn có nghĩa là nhãn màu đỏ của nhãn hiệu của bạn không có ở đó không? Tôi đã kiểm tra mã của bạn và OK. Bạn có gặp lỗi trong Bảng điều khiển JS không? Ngoài ra còn có một tùy chọn 'title' là một chú giải công cụ di chuột, có lẽ đó là những gì bạn muốn? –

không có nhãn màu đỏ ở đó nhưng tôi muốn thêm tiêu đề như var marker = new google.maps.Marker ({ vị trí: myLatlng, tiêu đề: "Hello World!" }); bởi vì tôi muốn có thể đọc tất cả các điểm đánh dấu trong một cụm để thêm chúng vào một infowindow như: var titles = ""; // Nhận tất cả các tiêu đề cho (var i = 0; i jprbest

Phần khó khăn sẽ xác định cụm là gì. Bạn cũng có nghĩa là cho tất cả các dấu hiệu trong một cụm được xác định để mở cùng một infowindow? –

Sự thay đổi quan trọng là titles += markers[i].labelContent + "\n";. (Bạn có thể sử dụng ký hiệu chấm hoặc markers[i]["labelContent"] để xem lại bất kỳ thuộc tính nào bạn đã đặt). Tôi cũng đã thay đổi phần markers.push(markers) và rằng khi thu phóng được thay đổi, cửa sổ sẽ biến mất (vì số cụm có thể thay đổi) Mọi thứ khác trông tuyệt vời!

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>

Nguồn

2012-05-09 18:31:59

Cảm ơn nó hoạt động – jprbest

@Heitor Chang, Tôi có thể thêm một liên kết trên labelContent không? Nếu có thì làm sao? – Emu

tạo InfoWindow cho các điểm đánh dấu phân cụm bằng cách sử dụng Google Maps v3

Trả lời

Các vấn đề liên quan