एक जावास्क्रिप्ट के केंद्र में क्रॉसहेयर प्रदर्शित करना Google मानचित्र

Question

मैं एक Google मानचित्र के केंद्र में तय किया गया क्रॉसहेयर/रेटिक्यूल प्रदर्शित करना चाहता हूं, जैसे कि Wikimapia.org करें। दुर्भाग्यवश वे एपीआई के v2 का उपयोग कर रहे हैं और मैं v3 का उपयोग कर रहा हूं।

क्रॉसहेयर केंद्र में तय रहना चाहिए क्योंकि उपयोगकर्ता मानचित्र को पैन करता है।

ControlPosition enum के लिए CENTER विकल्प नहीं है, इसलिए मुझे लगता है कि कोई समाधान थोड़ा हैकी होगा।

मैंने इसे मानचित्र के बाहर एक div के रूप में ओवरले करने की कोशिश की है, लेकिन मैंने इसे मानचित्र के शीर्ष पर प्रदर्शित करने में कामयाब नहीं किया है - ऐसा लगता है कि यह एक ज़ेड-ऑर्डर शोडाउन में फंस गया है।

Answer 1

दिया गया समाधान मेरे लिए काम नहीं करता है, क्योंकि ओवरव्यू div नक्शा में एक मृत स्थान बनाता है। Google मानचित्र जावास्क्रिप्ट एपीआई वी 3 का उपयोग करके, मेरी परियोजना के लिए एक बेहतर समाधान, मानचित्र पर एक पिक्सेल आयताकार आकार के साथ मार्कर के रूप में रीटिकल बनाना था। फिर मार्कर को हाल ही में नक्शे के लिए बाउंड्स_changed ईवेंट का उपयोग करें।

रेटिकल छवि 63 x 63 पीएनजी है। (छवियों/reticle.png)

मार्कर छवि और आकार निर्धारित करें ...

var reticleImage = new google.maps.MarkerImage(
    'images/reticle.png',   // marker image 
    new google.maps.Size(63, 63), // marker size 
    new google.maps.Point(0,0),  // marker origin 
    new google.maps.Point(32, 32)); // marker anchor point 
    var reticleShape = { 
    coords: [32,32,32,32],   // 1px 
    type: 'rect'      // rectangle 
    }; 

हमारे नक्शा (main_map) हम मार्कर जोड़ने के निर्माण के बाद ...

reticleMarker = new google.maps.Marker({ 
    position: latlng, 
    map: main_map, 
    icon: reticleImage, 
    shape: reticleShape, 
    optimized: false, 
    zIndex: 5 
    }); 

यहाँ var latlng एक ही LatLng ऑब्जेक्ट है जो main_map बनाने के लिए उपयोग किया जाता है। शीर्ष पर छिद्र रखने के लिए, ज़िन्डेक्स किसी अन्य मार्कर ज़िन्डेक्स की तुलना में अधिक होना चाहिए।

फिर हम एक ईवेंट हैंडलर को कॉल करने के लिए कहते हैं जब नक्शा बाध्य_changed निकाल दिया जाता है।

google.maps.event.addListener(main_map, 'bounds_changed', centerReticle); 

और अंत में हमारे पास केंद्रReticle() फ़ंक्शन है।

function centerReticle(){ 
    reticleMarker.setPosition(main_map.getCenter()); 
    } 

हम 'bounds_changed' घटना हम addListener कॉल करने के लिए एक गुमनाम समारोह पारित करके कोड को साफ़ रखने कर सकते हैं के साथ कुछ और नहीं कर रहे हैं के बाद से ... यह हमें centerReticle परिभाषित करने के लिए होने से रहता है() समारोह।

google.maps.event.addListener(main_map, 'bounds_changed', 
     function(){reticleMarker.setPosition(main_map.getCenter());}); 

यह वास्तव में बहुत चिकना काम करता है। मुझे आशा है कि यह दूसरों की मदद करेगा।

धन्यवाद।

Answer 2

ठीक है, मैं मूर्ख हूं और यह कठिन होना चाहिए जितना होना चाहिए।

के बजाय सवाल हटाते हैं, तो यहाँ मामले में एक समाधान है, यह मदद करता है बाहर किसी और:

<div id="container"> 
    <div id="map"></div> 
    <div id="reticule"><img src="reticule.gif" /></div> 
</div> 

और कुछ शैलियों:

#container { position:relative; } 
#map { height:100%; width:100%; } 
#reticule { 
    position:absolute; 
    width:13px; 
    height:13px; 
    left:50%; 
    top:50%; 
    margin-top:-8px; 
    margin-left:-8px; 
    pointer-events: none; 
} 

मानचित्र के ठीक मध्य में नहीं है यही कारण है कि

Answer 3

मैं समाधान मैं DaftLogic.com में पाया उपयोग कर रहा हूँ जाएं।ऐसा लगता है कि मूल रूप से BentFX के समान समाधान है लेकिन बहुत अधिक terse।

var marker = new google.maps.Marker({ 
    map: map, 
    icon: '/images/reticle.png' 
}); 
marker.bindTo('position', map, 'center'); 

दुर्भाग्य से यह भी समस्या ड्रयू उल्लेख किया जहां क्रॉसहेयर स्थायी रूप से मानचित्र के केंद्र से तय नहीं होते से ग्रस्त है। यदि आप मानचित्र को जल्दी से खींचते हैं या ज़ूम इन और आउट करते हैं, तो आप क्रॉसहेयर को थोड़ी देर तक ले जाएंगे जब तक कि इसे हाल ही में पेश करने का समय न हो। अगर कोई बेहतर समाधान के साथ आता है, तो कृपया हमें बताएं।