Google मानचित्र v3

का उपयोग करके क्लस्टर मार्करों के लिए InfoWindow बनाएं I एक मानचित्र विकसित कर रहा है जो भीड़ वाले पिन को रोकने के लिए पिन क्लस्टर करेगा, लेकिन मैं एक जानकारी बनाना चाहता हूं जो मार्कर पर क्लिक करते समय सभी मार्कर सूचीबद्ध करेगा, मैंने कोशिश की चारों ओर कुछ मदद प्राप्त करें और पता चला कि मैं marker.getTitle() का उपयोग करके इसे कर सकता हूं लेकिन यह मेरी मदद नहीं कर रहा है क्योंकि मैं makrewithLable ऑब्जेक्ट का उपयोग कर रहा हूं और शीर्षक का उपयोग नहीं कर रहा हूं, मेरा प्रश्न मार्कर में शीर्षक जोड़ने का कोई कारण है या जैसा कि मैं पसंद करता हूं infowindow में उन्हें सूचीबद्ध करने के बजाय लेबल का उपयोग करने के लिए। यहां मेरे काम की एक प्रति है।Google मानचित्र 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' जोड़ सकता हूँ? क्या आपका मतलब है कि आपका मार्कर का लाल रंग का लेबल वहां नहीं है? मैंने आपके कोड का परीक्षण किया और यह ठीक है। क्या आपको जेएस कंसोल में त्रुटियां मिलीं? एक 'शीर्षक' विकल्प भी है जो एक होवर टूलटिप है, हो सकता है कि आप यही चाहते हैं? –

कोई लाल रंग का लेबल नहीं है लेकिन मैं var marker = new google.maps.Marker जैसे शीर्षक जोड़ना चाहता हूं ({ स्थिति: myLatlng, शीर्षक: "हैलो वर्ल्ड!" }); क्योंकि मैं एक क्लस्टर के तहत सभी मार्करों को एक infowindow में जोड़ने के लिए सक्षम होना चाहता हूं: var titleles = ""; // सभी शीर्षक प्राप्त करें (var i = 0; i jprbest

कठिन हिस्सा परिभाषित करेगा कि क्लस्टर क्या है। क्या आप एक परिभाषित क्लस्टर में सभी मार्करों के लिए भी एक ही infowindow खोलने का मतलब है? –

कुंजी परिवर्तन 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

@ हेइटर चांग काम करता है, क्या मैं लेबल सामग्री पर एक लिंक जोड़ सकता हूं? यदि हां, तो कैसे? – Emu

Google मानचित्र v3

उत्तर

संबंधित मुद्दे