टूलटिप

Question

मैं विभिन्न क्षेत्र के लिए बहुभुज है और अपने आवेदन में कहा गया है। मार्कर शीर्षक विशेषता लेकर टूलटिप लागू करते हैं। एक पॉलीगॉन घटनाओं पर माउसओवर और माउसआउट पर निकाल दिया जा सकता है। मैं एक टूलटिप कैसे बना सकता हूं जो कि मार्कर के लिए लागू टूलटिप की तरह दिखता है।

संपादित करें -1: बहुभुज बनाने के लिए उपयोग किए गए कोड को जोड़ना और हैंडलर को टूलटिप्स दिखाने/छिपाने के लिए संलग्न करना।

function addPolygon(points) { 
    var polygon = new google.maps.Polygon({ 
     paths: points, 
     strokeColor: " #FFFFFF", 
     strokeOpacity: 0.15, 
     strokeWeight: 1.5, 
     fillColor: "#99ff66", 
     fillOpacity: 0.14 
    }); 
    var tooltip = document.createElement('div'); 
    tooltip.innerHTML = "Alok"; 

    google.maps.event.addListener(polygon,'mouseover',function(){ 
     tooltip.style.visibility = 'visible'; 
    }); 
    google.maps.event.addListener(polygon,'mouseout',function(){ 
     tooltip.style.visibility = 'hidden'; 
    }); 
    polygon.setMap(map); 
} 

Answer 1

मुझे लगता है कि आप इसे एक पेज मैं लागू कर दिया है मैं पृष्ठ के लिए एक माउस की घटना संलग्न yourself.In तो मैं माउस position.Then जब एक बहुभुज माउसओवर घटना होती है मैं एक प्रदर्शित रिकॉर्ड कर सकते हैं करना होगा माउस स्थिति

आशा है कि यह मदद करता है

Answer 2

आप निम्न

//Add a listener for the click event 
google.maps.event.addListener('click', showArrays); 
infoWindow = new google.maps.InfoWindow; 

की कोशिश कर सकते पास कस्टम div

फिर जब क्लिक करें घटना निम्नलिखित समारोह

function showArrays(event) { 

    var contentString = 'Content here'; 

    // Replace the info window's content and position. 
    infoWindow.setContent(contentString); 
    infoWindow.setPosition(event.latLng); 

    infoWindow.open(map); 
} 

Answer 3

वहाँ वास्तव में एक स्वच्छ चाल Google मानचित्र में यह (अजीब) कामचलाऊ समाधान करने के लिए फोन होता है। अपने माउस को डेटा आइटम पर ले जाने पर, आप बस मानचित्र के <div> पर टूलटिप जोड़ सकते हैं। यह उस स्थान पर जोड़ा जाएगा जहां आपका माउस पॉइंटर वर्तमान में है - आइटम पर दाएं!

map.data.addListener('mouseover', mouseOverDataItem); 
map.data.addListener('mouseout', mouseOutOfDataItem)); 

...

function mouseOverDataItem(mouseEvent) { 
    const titleText = mouseEvent.feature.getProperty('propContainingTooltipText'); 

    if (titleText) { 
    map.getDiv().setAttribute('title', titleText); 
    } 
} 

function mouseOutOfDataItem(mouseEvent) { 
    map.getDiv().removeAttribute('title'); 
}