Google मानचित्र v3 मार्कर माउसओवर टूलटिप

Question

मैं माउस पर मार्कर पर एक टूलटिप स्वयं को divs के साथ बनाना चाहता हूं, लेकिन मुझे नहीं पता कि स्क्रीन को स्थिति को सही स्थिति में रखने के लिए स्क्रीन स्थिति कैसे प्राप्त करें, यहां है मेरी कोड:

google.maps.event.addListener(marker, "mouseover", function() { 
      divover.css("left", marker.get("left")); 
      divover.css("top", marker.get("top")); 
      divover.css("display", "block"); 
}); 

google.maps.event.addListener(marker, "mouseout", function() { 
      divover.css("display", "none"); 
}); 

जाहिर प्राप्त विधि विफल रहता है। कोई उपाय?

Answer 1

यह एक मुश्किल है। एपीआई के वी 2 में, आप कर सकते हैं:

map.fromLatLngToContainerPixel(marker.getLatLng(), zoomLevel); 

v3 में, विधि fromLatLngToContainerPixel MapCanvasProjection वस्तु ले जाया गया है। MapCanvasProjection ऑब्जेक्ट प्राप्त करने के लिए, आपको ओवरलेव्यू ऑब्जेक्ट पर getProjection कॉल करने की आवश्यकता है। ऐसा लगता है कि मार्कर क्लास ओवरलेव्यू से बढ़ाया गया है, लेकिन दुर्भाग्यवश इसमें GetProjection विधि नहीं है। मुझे नहीं पता कि क्यों - एक बग दर्ज करने लायक हो सकता है।

तरह से मेरे द्वारा की गई यह मेरे स्वयं के कस्टम मार्कर वर्ग, OverlayView के आधार पर बनाने के द्वारा है, इसलिए यह अभी भी getProjection विधि है:

var point = this.getProjection().fromLatLngToDivPixel(this.latlng_); 

आप custom overlays पर गूगल के ट्यूटोरियल पढ़ने के लिए या उनके example कॉपी कर सकते हैं शुरू करने के लिए

Answer 2

another post में एक समाधान मिला:

var point = gmap.getProjection().fromLatLngToPoint(marker.getPosition()) 

Answer 3

मैं मुसीबत नक्शा खींच यहाँ विधि का उपयोग कर या एक डमी overlayview बनाने और इसके प्रक्षेपण उपयोग करने के बाद अद्यतन करने के लिए प्रक्षेपण हो रही हो रही थी। इस समस्या को हल करने के लिए http://qfox.nl/notes/116

/** 
* @param {google.maps.Map} map 
* @param {google.maps.LatLng} latlng 
* @param {int} z 
* @return {google.maps.Point} 
*/ 
var latlngToPoint = function(map, latlng, z){ 
    var normalizedPoint = map.getProjection().fromLatLngToPoint(latlng); // returns x,y normalized to 0~255 
    var scale = Math.pow(2, z); 
    var pixelCoordinate = new google.maps.Point(normalizedPoint.x * scale, normalizedPoint.y * scale); 
    return pixelCoordinate; 
}; 
/** 
* @param {google.maps.Map} map 
* @param {google.maps.Point} point 
* @param {int} z 
* @return {google.maps.LatLng} 
*/ 
var pointToLatlng = function(map, point, z){ 
    var scale = Math.pow(2, z); 
    var normalizedPoint = new google.maps.Point(point.x/scale, point.y/scale); 
    var latlng = map.getProjection().fromPointToLatLng(normalizedPoint); 
    return latlng; 
}; 

Answer 4

infowindow डिज़ाइन किया गया है: मैं एक समाधान है कि यहाँ मेरे लिए 100% काम करता है पाया। http://code.google.com/apis/maps/documentation/javascript/overlays.html#InfoWindows

Answer 5

यहाँ एक ट्यूटोरियल मैं सिर्फ कैसे गूगल मैप्स एपीआई V3 के लिए एक टूलटिप बनाने के लिए पर बनाया के लिए लिंक है: http://medelbou.wordpress.com/2012/02/03/creating-a-tooltip-for-google-maps-javascript-api-v3/ कार्रवाई में यह देखने के लिए, यहाँ जाना http://medelbou.com/demos/google-maps-tooltip/

Answer 6

किसी तरह, अन्य जवाब में से कोई भी मेरे लिए काम किया या मैं उन्हें लागू नहीं करना चाहता था (उदाहरण के लिए creating your own custom Marker class)।

कुछ और खोज के बाद मैं this solution पाया, हालांकि, कि करता बिल्कुल क्या आवश्यक है:

function latlngToPoint(map, latLng) { 
    var topRight = map.getProjection().fromLatLngToPoint(map.getBounds().getNorthEast()); 
    var bottomLeft = map.getProjection().fromLatLngToPoint(map.getBounds().getSouthWest()); 
    var scale = Math.pow(2, map.getZoom()); 
    var worldPoint = map.getProjection().fromLatLngToPoint(latLng); 
    var point = new google.maps.Point((worldPoint.x - bottomLeft.x) * scale, (worldPoint.y - topRight.y) * scale); 
    return point; 
} 

तो बस var position = latlngToPoint(map, marker.getPosition()); फोन और