Google मानचित्र v3 पॉलीलाइन टूलटिप

Question

एक Google मानचित्र मार्कर ऑब्जेक्ट (google.maps.Marker) में शीर्षक शीर्षक है, इसलिए जब कोई उपयोगकर्ता अपने माउस को मार्कर पर ले जाता है तो एक साधारण टूलटिप प्रदर्शित होता है।

पॉलीलाइन (google.maps.Polyline) पर शीर्षक शीर्षक नहीं है। क्या मैं ऐसा कर सकता हूं/इसे V3 में अनुकरण कर सकता हूं? मैं इसे V2 में कर सकता हूं, और मुझे V3 के लिए कोई उदाहरण नहीं मिल रहा है।

Answer 1

अगर मैं गलत नहीं हूँ मैं नहीं लगता कि यह poss है: myInfoWindow.setContent("Hello World!")

का उपयोग कर इसे माउसओवर पर दिखाई जाने वाली सामग्री में निर्धारित करते हैं, आप की तरह कुछ करने की आवश्यकता होगी टूलटिप सेट करने के लिए ible जैसा कि आपने बताया है कि पॉलीगॉनऑप्शन ऑब्जेक्ट में शीर्षक शीर्षक नहीं है। लेकिन आप एक div बना सकते हैं जो टूलटिप के समान दिखता है और इसे अपने माउस के मूसमॉव के दौरान बताएं घटना। मैंने पॉलीगॉन के केंद्र में कहीं भी इस टूलटिप को रखने का समाधान खोजने का प्रयास किया लेकिन मुझे लगता है कि यह एक बड़ी समस्या है इसलिए मुझे लगता है कि Google लोगों ने इसे भी लागू नहीं किया है। चीयर्स

Answer 2

मैं 100% नहीं कर रहा हूँ इस एक ही तरीका है, या सबसे अच्छा तरीका है, लेकिन यह अपनी पॉलीलाइन पर एक खिड़की बनाने के लिए एक रास्ता है

गूगल में वी 3 नक्शे, तो आप एक InfoWindow बनाने के लिए करना चाहिए

 

google.maps.event.addListener(myPolyline, 'mouseover', function() { 
    myInfoWindow.open(mymap); 
    // mymap represents the map you created using google.maps.Map 
}); 

// assuming you want the InfoWindow to close on mouseout 
google.maps.event.addListener(myPolyline, 'mouseout', function() { 
    myInfoWindow.close(); 
}); 
 

Answer 3

मैं http://philmap.000space.com/gmap-api/poly-hov.html से ऑनलाइन है कि मुझे बहुभुज पर टूलटिप्स कर मदद की, पाया:

var tooltip=function(){ 
var id = 'tt'; 
var top = 3; 
var left = 3; 
var maxw = 200; 
var speed = 10; 
var timer = 20; 
var endalpha = 95; 
var alpha = 0; 
var tt,t,c,b,h; 
var ie = document.all ? true : false; 
return{ 
    show:function(v,w){   
     if(tt == null){    
      tt = document.createElement('div'); 
      tt.setAttribute('id',id); 
      t = document.createElement('div'); 
      t.setAttribute('id',id + 'top'); 
      c = document.createElement('div'); 
      c.setAttribute('id',id + 'cont'); 
      b = document.createElement('div'); 
      b.setAttribute('id',id + 'bot'); 
      tt.appendChild(t); 
      tt.appendChild(c); 
      tt.appendChild(b); 
      document.body.appendChild(tt);    
      tt.style.opacity = 0; 
      tt.style.filter = 'alpha(opacity=0)'; 
      document.onmousemove = this.pos;     
     } 
     tt.style.visibility = 'visible'; 
     tt.style.display = 'block'; 
     c.innerHTML = v; 
     tt.style.width = w ? w + 'px' : 'auto'; 
     if(!w && ie){ 
      t.style.display = 'none'; 
      b.style.display = 'none'; 
      tt.style.width = tt.offsetWidth; 
      t.style.display = 'block'; 
      b.style.display = 'block'; 
     } 
     if(tt.offsetWidth > maxw){tt.style.width = maxw + 'px'} 
     h = parseInt(tt.offsetHeight) + top; 
     clearInterval(tt.timer); 
     tt.timer = setInterval(function(){tooltip.fade(1)},timer); 
    }, 
    pos:function(e){ 
     var u = ie ? event.clientY + document.documentElement.scrollTop : e.pageY; 
     var l = ie ? event.clientX + document.documentElement.scrollLeft : e.pageX; 
     tt.style.top = (u - h) + 'px'; 
     tt.style.left = (l + left) + 'px'; 
    }, 
    fade:function(d){ 
     var a = alpha; 
     if((a != endalpha && d == 1) || (a != 0 && d == -1)){ 
      var i = speed; 
      if(endalpha - a < speed && d == 1){ 
       i = endalpha - a; 
      }else if(alpha < speed && d == -1){ 
       i = a; 
      } 
      alpha = a + (i * d); 
      tt.style.opacity = alpha * .01; 
      tt.style.filter = 'alpha(opacity=' + alpha + ')'; 
     }else{ 
      clearInterval(tt.timer); 
      if(d == -1){tt.style.display = 'none'} 
     } 
    }, 
    hide:function(){ 
     clearInterval(tt.timer); 
     tt.timer = setInterval(function(){tooltip.fade(-1)},timer); 
    } 
}; 
}(); 

इसके अलावा, कृपया इस अतः एक ही विषय के बारे में चर्चा देखें: Tooltip over a Polygon in Google Maps और, Google maps rectangle/polygon with title

Answer 4

मैंने here से से जानकारी के साथ @ samshull का उत्तर (विधिवत अपवित्र!) को संयुक्त किया है, जहां उपयोगकर्ता का कर्सर mo लाइन पर उपयोग करता है:

// Open the InfoWindow on mouseover: 
google.maps.event.addListener(line, 'mouseover', function(e) { 
    infoWindow.setPosition(e.latLng); 
    infoWindow.setContent("You are at " + e.latLng); 
    infoWindow.open(map); 
}); 

// Close the InfoWindow on mouseout: 
google.maps.event.addListener(line, 'mouseout', function() { 
    infoWindow.close(); 
}); 

यहाँ, line अपने PolyLine वस्तु है; map आपकी Map ऑब्जेक्ट है;

:

var infoWindow = new google.maps.InfoWindow(); 

मैं भी फिर से उपयोग करते हुए अपने सभी पोलीलाइंस के लिए एक ही InfoWindow वस्तु के बजाय प्रत्येक पंक्ति के लिए एक नया एक बनाने के द्वारा this advice का पालन करें: और infoWindow अपने InfoWindow वस्तु है, जो मैं सिर्फ बनाने के साथ है

सर्वोत्तम प्रथाओं: सर्वोत्तम उपयोगकर्ता अनुभव के लिए, केवल एक जानकारी विंडो किसी भी समय मानचित्र पर खुली जानी चाहिए। एकाधिक जानकारी विंडोज नक्शा cluttered दिखाई देते हैं। यदि आपको केवल एक समय में एक जानकारी विंडो की आवश्यकता है, आप केवल एक InfoWindow ऑब्जेक्ट बना सकते हैं और इसे अलग-अलग स्थानों या मानचित्र पर ईवेंट ईवेंट जैसे मार्कर पर खोल सकते हैं। यदि आप को एक से अधिक जानकारी विंडो की आवश्यकता है, तो आप एक साथ कई InfoWindow ऑब्जेक्ट्स प्रदर्शित कर सकते हैं।

ध्यान दें कि infoWindow.setContent() एक स्ट्रिंग लेता है। तो यदि आप InfoWindow में कोई संख्या प्रदर्शित करना चाहते हैं तो 0 चरको एक चर वैरिएबल पर कॉल करें।

मैं एक अपूर्ण समाधान के रूप में यह सब देखने जब तक गूगल मैप्स उम्मीद है कि एक दिन PolylineOptions करने के लिए एक title प्रॉपर्टी जोड़ते हैं, जैसे वे पहले से ही MarkerOptions के लिए किया है।