मानचित्र आप एक कस्टम ओवरले बनाने की जरूरत के लिए एक लेबल जोड़ने के लिए। http://blog.mridey.com/2009/09/label-overlay-example-for-google-maps.html पर नमूना एक कस्टम क्लास, Layer का उपयोग करता है, जो Google मानचित्र API से OverlayView (जो MVCObject से प्राप्त होता है) से प्राप्त होता है। उन्होंने कहा कि एक संशोधित संस्करण है (दृश्यता के लिए समर्थन जोड़ता, zindex और एक क्लिक करें घटना) यहां पाया जा सकता है जो: http://blog.mridey.com/2011/05/label-overlay-example-for-google-maps.html
निम्नलिखित कोड सीधे मार्क Ridey के ब्लॉग (ऊपर संशोधित लिंक) से लिया जाता है।
लेयर वर्ग
// Define the overlay, derived from google.maps.OverlayView
function Label(opt_options) {
// Initialization
this.setValues(opt_options);
// Label specific
var span = this.span_ = document.createElement('span');
span.style.cssText = 'position: relative; left: -50%; top: -8px; ' +
'white-space: nowrap; border: 1px solid blue; ' +
'padding: 2px; background-color: white';
var div = this.div_ = document.createElement('div');
div.appendChild(span);
div.style.cssText = 'position: absolute; display: none';
};
Label.prototype = new google.maps.OverlayView;
// Implement onAdd
Label.prototype.onAdd = function() {
var pane = this.getPanes().overlayImage;
pane.appendChild(this.div_);
// Ensures the label is redrawn if the text or position is changed.
var me = this;
this.listeners_ = [
google.maps.event.addListener(this, 'position_changed', function() { me.draw(); }),
google.maps.event.addListener(this, 'visible_changed', function() { me.draw(); }),
google.maps.event.addListener(this, 'clickable_changed', function() { me.draw(); }),
google.maps.event.addListener(this, 'text_changed', function() { me.draw(); }),
google.maps.event.addListener(this, 'zindex_changed', function() { me.draw(); }),
google.maps.event.addDomListener(this.div_, 'click', function() {
if (me.get('clickable')) {
google.maps.event.trigger(me, 'click');
}
})
];
};
// Implement onRemove
Label.prototype.onRemove = function() {
this.div_.parentNode.removeChild(this.div_);
// Label is removed from the map, stop updating its position/text.
for (var i = 0, I = this.listeners_.length; i < I; ++i) {
google.maps.event.removeListener(this.listeners_[i]);
}
};
// Implement draw
Label.prototype.draw = function() {
var projection = this.getProjection();
var position = projection.fromLatLngToDivPixel(this.get('position'));
var div = this.div_;
div.style.left = position.x + 'px';
div.style.top = position.y + 'px';
div.style.display = 'block';
this.span_.innerHTML = this.get('text').toString();
};
प्रयोग
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>
Label Overlay Example
</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="label.js"></script>
<script type="text/javascript">
var marker;
function initialize() {
var latLng = new google.maps.LatLng(40, -100);
var map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 5,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
marker = new google.maps.Marker({
position: latLng,
draggable: true,
zIndex: 1,
map: map,
optimized: false
});
var label = new Label({
map: map
});
label.bindTo('position', marker);
label.bindTo('text', marker, 'position');
label.bindTo('visible', marker);
label.bindTo('clickable', marker);
label.bindTo('zIndex', marker);
google.maps.event.addListener(marker, 'click', function() { alert('Marker has been clicked'); })
google.maps.event.addListener(label, 'click', function() { alert('Label has been clicked'); })
}
function showHideMarker() {
marker.setVisible(!marker.getVisible());
}
function pinUnpinMarker() {
var draggable = marker.getDraggable();
marker.setDraggable(!draggable);
marker.setClickable(!draggable);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="height: 200px; width: 200px"></div>
<button type="button" onclick="showHideMarker();">Show/Hide Marker</button>
<button type="button" onclick="pinUnpinMarker();">Pin/Unpin Marker</button>
</body>
</html>
स्पष्ट रूप से, मैं अपना पूरा कोड
पर नहीं बदल सकता। मुझे यकीन नहीं है कि क्यों, हालांकि केवल कुछ युद्धों के साथ-साथ एक घटना भी है। मेरा और अन्य कामकाजी कोडों के बीच एकमात्र असली मुख्य अंतर यह है कि में केवल वैरिएबल मानचित्र, फ़ंक्शंस और ईवेंट शामिल हैं। जबकि मेरा स्थान स्थानों के लिए एक लूप का उपयोग करता है। – krikaraशायद पृष्ठ को लोड होने के क्रम में करना होगा, उदाहरण के लिए, यदि शरीर लोड होने के बाद जावास्क्रिप्ट लोड हो जाता है। –
यह एक अच्छा है .. लेकिन मार्करों की संख्या बहुत बड़ी होने पर लेबल को प्रदर्शित करने में काफी समय लगता है .. क्या इस समस्या –