Googleマップv3ポリラインツールチップ

Question

google mapsマーカーオブジェクト（google.maps.Marker）にはtitleプロパティがあります。そのため、ユーザーがマーカー上でマウスを動かすと簡単なツールチップが表示されます。

ポリライン（google.maps.Polyline）にtitleプロパティはありません。私はこれを行う方法/ V3でこれをシミュレートする方法はありますか？ V2 でこれを行うことができましたが、V3の例は見つかりません。

Answer 1

私は間違っていない場合、私はそれがPOSSだとは思いませんあなたはPolygonOptionsオブジェクトのtitleプロパティがないと言いましたので、ツールティップを設定することができます。はツールチップと全く同じように見え、マウスの先端にあると言いましょうmousemove中イベント。このツールヒントをポリゴンの中心のどこかに配置する解決策も見つけようとしましたが、私はそれがあまりにも多くのトラブルであると考えています。 乾杯

Answer 2

私はこれが唯一の方法、または最善の方法ですが、それはあるグーグルでは、あなたのポリライン上

をウィンドウを作成する方法はV3をマッピングし、あなたがしてInfoWindowを作成する必要があり、100％ではありませんよそれはマウスオーバーで表示させるためにはmyInfoWindow.setContent("Hello World!")

を使用してコンテンツを設定し、あなたのような何かをする必要があります。

 

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); 
    } 
}; 
}(); 

また、同じトピックについてのこのSOの議論を参照してください： Tooltip over a Polygon in Google Maps をそして、 Google maps rectangle/polygon with title

Answer 4

私はhereの情報で上記のサムスルの答え（正式にupvoted！）を組み合わせてInfoWindowをユーザーのカーソルモライン上で使用しています。ここでは

// 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オブジェクトです。そしてinfoWindowは、私はちょうどで作成し、あなたの情報ウィンドウオブジェクトを、次のとおりです。

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

私も私のすべてのポリラインに同じ情報ウィンドウオブジェクトを再利用するのではなく行ごとに新しいものを作成することによってthis adviceに従ってください：

ベストプラクティス：最高のユーザーエクスペリエンスを実現するには、1度に1つの情報ウィンドウ を地図上に開く必要があります。複数の情報ウィンドウで、 地図が乱雑に見えます。一度に1つの情報ウィンドウしか必要としない場合は、 のInfoWindowオブジェクトを1つだけ作成し、ユーザーのクリックなどのマップイベントで別の の場所またはマーカーで開くことができます。 に複数の情報ウィンドウが必要な場合は、複数のInfoWindow オブジェクトを同時に表示できます。

infoWindow.setContent()は文字列を取ります。 InfoWindowに番号を表示する場合は、番号変数にtoString()を呼び出します。

MarkerOptionsと同じように、GoogleマップでtitleのプロパティをPolylineOptionsに追加するまで、これは不完全な回避策とみなされます。