8

Googleマップでポリゴンをいくつか作成しました。次に、ポリゴンにマウスオーバー（およびマウスアウト）を追加して、ポリゴンにカーソルを合わせると、領域の名前が表示されるようにします。マウスアウトすると名前が消えます（ブラウザのボタンにカーソルを合わせたときなど）

var map;
var infoWindow;

function initialize() {
    var myLatLng = new google.maps.LatLng(50.88111111111, 3.889444444444);
    var myOptions = {
        zoom: 12,
        center: myLatLng,
        mapTypeId: google.maps.MapTypeId.TERRAIN
    };

    var poly;
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    var polyCoords = [
        verwissel(3.869506,50.906449),
        verwissel(3.869654,50.905664),
        verwissel(3.869934,50.904131),
        verwissel(3.870310,50.902717),
        verwissel(3.870471,50.901559),
    ];

    poly = new google.maps.Polygon({
        paths: HerzeleCoords,
        strokeColor: "#FF0000",
        strokeOpacity: 0.8,
        strokeWeight: 3,
        fillColor: "#FF0000",
        fillOpacity: 0.35
    });

    google.maps.event.addListener(Poly, "mouseover", function(showtext("polyname"));
google.maps.event.addListener(Poly, "mouseover", function(do not show text anymore);

これは私がどのように見えるかと思いますが、それがどのように機能するかはわかりません。

4

2 に答える 2

19

次に例を示します：http：//jsfiddle.net/tcfwH/304/

ブラウザのツールチップとまったく同じではありませんが、テキストのスタイルを設定できます。MarkerWithLabelを使用しています。各マーカーは、そのポリゴンの名前に使用されます。複数行のボックスを切り替えるwhite-space: nowrapには、CSSを変更します。実用的なオプションとしてInfoBoxもありますが、MarkerWithLabelよりもはるかに複雑に使用できます。

イベントリスナーは、マウスの位置に応じてMarkerWithLabelを移動します。

  google.maps.event.addListener(poly, "mousemove", function(event) {
    marker.setPosition(event.latLng);
    marker.setVisible(true);
  });
  google.maps.event.addListener(poly, "mouseout", function(event) {
    marker.setVisible(false);
  });
于 2012-05-23T15:49:31.667 に答える