web-dev-qa-db-ja.com

Google Maps v3のテキストラベル

私は最近、Googleマップでv2からv3に移行しましたが、壊れた機能の1つは、サードパーティライブラリ（BpLabel）を使用して実装していたテキストラベルの使用でした

The text labels in the map

質問：
「マウスオーバー」などのイベントがトリガーされるGoogleマップv3でテキストラベルを表示するにはどうすればよいですか？ 注：マーカーをテキストラベルと共に表示したくない。テキストラベルのみを表示したい

私が試したこと：

  • InfoWindowを使用しましたが、あまりにも雑然としているため、オーバーレイを明示的に閉じる必要がありますが、マウスポインターを重ねるとオーバーレイを閉じる必要があります
  • InfoWindowを使用しました。InfoWindowほど混乱していませんが、これにはmouseoverなどのイベントトリガーもありません。

同様の問題に直面した人からの助けは、非常に高く評価されます。

乾杯、
ロヒテシュ

javascriptgoogle-mapsgoogle-maps-api-3google-maps-markers
17
Rohitesh

これを行う唯一の方法は、マーカーをラベルとして使用すること、つまり、マーカーの形状を目的のラベルに変更することだと思います。その方法の2つのアイデア：

1）カスタムシェイプとテキストで変更されたマーカーを使用します。 Googleを使用して生成された画像アイコン 画像グラフ および インフォグラフィックス （ here または here など）しかし そのようなアイコンを作成するためのGoogle APIは改善なしで廃止されました！またはそうではありませんか？ 混乱があります、参照ここに私のコメント。

2）markerwithlabelライブラリを使用します"）。このライブラリを使用すると、マーカーアイコンの有無にかかわらず、ラベル付きのマーカーを定義できます。マーカーアイコンが必要ない場合は、icon: {}：

 var marker = new MarkerWithLabel({
   position: homeLatLng,
   draggable: true,
   raiseOnDrag: true,
   map: map,
   labelContent: "$425K",
   labelAnchor: new google.maps.Point(22, 0),
   labelClass: "labels", // the CSS class for the label
   icon: {}
 });

その後、通常のマーカーと同様に作業できます。つまり、マウスオーバーイベントにInfoWindowを追加します。

必要なものにこのライブラリを使用する方法の例 。

競合コード：

                             <!DOCTYPE html>
<html>
<head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8" />
 <title>MarkerWithLabel Mouse Events</title>
 <style type="text/css">
   .labels {
     color: red;
     background-color: white;
     font-family: "Lucida Grande", "Arial", sans-serif;
     font-size: 10px;
     font-weight: bold;
     text-align: center;
     width: 40px;
     border: 2px solid black;
     white-space: nowrap;
   }
 </style>
 <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false"></script>
<!-- <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.9/src/markerwithlabel.js"></script>-->
 <script type="text/javascript" src="markerwithlabel.js"></script>
 <script type="text/javascript">
   function initMap() {
     var latLng = new google.maps.LatLng(49.47805, -123.84716);
     var homeLatLng = new google.maps.LatLng(49.47805, -123.84716);

     var map = new google.maps.Map(document.getElementById('map_canvas'), {
       zoom: 12,
       center: latLng,
       mapTypeId: google.maps.MapTypeId.ROADMAP
     });

     var marker = new MarkerWithLabel({
       position: homeLatLng,
       draggable: true,
       raiseOnDrag: true,
       map: map,
       labelContent: "$425K",
       labelAnchor: new google.maps.Point(22, 0),
       labelClass: "labels", // the CSS class for the label
       icon: {}
     });

     var iw = new google.maps.InfoWindow({
       content: "Home For Sale"
     });

var ibOptions = {
    content: 'content'
    // other options
};

var ib = new google.maps.InfoWindow(ibOptions);

ib.open(map, this);
     google.maps.event.addListener(marker, "mouseover", function (e) { ib.open(map, this); });
     google.maps.event.addListener(marker, "mouseout", function (e) { ib.close(map, this); });


   }

 </script>
</head>
<body onload="initMap()">
<p>Try interacting with the marker (mouseover, mouseout, click, double-click, mouse down, mouse up, drag) to see a log of events that are fired. Events are fired whether you are interacting with the marker portion or the label portion.</p>
 <div id="map_canvas" style="height: 400px; width: 100%;"></div>
</body>
</html>
19
TMS

InfoBoxを使用できますが、マップにイベントリスナーを追加することで、ホバーイベントを使用できません。情報ボックスにクラスを追加できます（デフォルトクラスは情報ボックスです）。jQueryまたはJavaScriptを使用して、ホバーイベントをこれに直接追加できるはずです。ラベル付きのマーカーを表示しないために使用するコードは次のとおりです。

var regionsMarkerInfo = [{markerLabel: 'Label Name', coordinates: [50, -120], markerTranslation: "Label Name"}, { another object }, etc... ],
    regionsOptions = [],
    regionLabel = [];

for(var r=0; r<regionsMarkerInfo.length; r++){
          regionsOptions[r] = {
           content: "<a href='http://"+window.location.Host+"/Destinations/Regions/" +  regionsMarkerInfo[r].markerLabel + ".aspx'>"+ regionsMarkerInfo[r].markerTranslation + "</a>"
          ,boxStyle: {
            textAlign: "left"
            ,fontSize: "18px"
            ,whiteSpace: "nowrap"
            ,lineHeight: "16px"
            ,fontWeight: "bold"
            ,fontFamily: "Tahoma"
           }
          ,disableAutoPan: true
          ,position: new google.maps.LatLng(regionsMarkerInfo[r].coordinates[0], regionsMarkerInfo[r].coordinates[1])
          ,closeBoxURL: ""
          ,isHidden: false
          ,pane: "floatPane"
          ,enableEventPropagation: true
          ,boxClass: "regionLabel"
          };

          regionLabel[r] = new InfoBox(regionsOptions[r]);
          regionLabel[r].open(map);
        }

次に、これを実行してホバーイベントを作成できるはずです。

$('.regionLabel').hover(function(){}, function(){});

または

document.getElementsByClassName('regionLabel).addEventListener('mouseover', ... )

これを実際に見る必要がある場合：

  1. ここに行く： http://travelalaska.dawleyassociates.com/Destinations/Regions.aspx

  2. コンソールを開いて、次のように入力します（コピー/貼り付け）：$（ '。regionLabel'）。hover（function（）{console.log（ 'hovered'）;}、function（）{console.log（ 'unhovered'）; }）;

  3. 大きなラベルにカーソルを合わせると、コンソールにテキスト出力が表示されます。

2
brouxhaha

URLがSVG画像であるアイコンを使用するようにGoogleマップに指示できます。ほとんどのブラウザでは、これはデータURIでもあります。クライアント側に必要なマーカーに適切なSVGを生成する方法を知っている場合、これを実行し、Base64ライブラリを使用してSVG文字列をBase64データに変換し、 'data：image/svg + xmlをプレフィックスとして付けます。 base64」を使用すると、データURIとして使用できます。

Internet Explorerはもう少しうるさいようです。SVGをレンダリングするには、scaledSizeプロパティと、通常のサイズ、Origin、anchor、urlプロパティが必要であることがわかりました。

このアプローチにより、スタイル付きテキストを含む完全なSVG画像を使用できるようになるため、必要なスタイルが設定されたラベル付きのマーカーを作成できます。

1
David Burton