18

私はJSとGoogleAPIを初めて使用し、それぞれにラベルが付いた複数のマーカーを作成しようとしています。

私が見てきた小さなスニペットから、Google MapsAPIv3のマーカーにラベルを付ける簡単な方法はありませんでした。Googleとstackoverflow検索の間で、誰もがラベルクラスの作成または編集を含むラウンドアバウト手順を使用しました。

JS / Google API v3を学び始めたばかりなので、簡単な方法で各マーカーにラベルを付ける方法を理解したいと思います。

ありがとう

編集＃3：さて、私はついに何が間違っているのかを理解し、Lilinaのコードを使用してラベル付きの複数のマーカーを正しく実装しました。どうやら、私たちは両方ともvarマップを異なる方法で定義し、それ自体が両方のコードをうまく同期できなくしているようです。

各マーカーにラベルを使用できるようになったので、追加の質問があります。ユーザーのズームレベルに基づいて、マーカーとそのラベルを非表示にできるようにしたい。

Google MapsAPIv3-さまざまなズームレベルのさまざまなマーカー/ラベル

4

3 に答える 3

38

最も単純であることを保証することはできませんが、 MarkerWithLabelが好きです。基本的な例に示されているように、CSSスタイルはラベルの外観を定義し、JavaScriptのオプションはコンテンツと配置を定義します。

 .labels {
   color: red;
   background-color: white;
   font-family: "Lucida Grande", "Arial", sans-serif;
   font-size: 10px;
   font-weight: bold;
   text-align: center;
   width: 60px;     
   border: 2px solid black;
   white-space: nowrap;
 }

JavaScript：

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

混乱する可能性がある唯一の部分はlabelAnchorです。デフォルトでは、ラベルの左上隅はマーカー画鋲の端点に整列します。labelAnchorのx値をCSSwidthプロパティで定義された幅の半分に設定すると、ラベルが中央に配置されます。のようなアンカーポイントを使用して、ラベルをマーカー画鋲の上に浮かせることができますnew google.maps.Point(22, 50)。

上記のリンクへのアクセスがブロックされている場合は、パックされたMarkerWithLabelのソースをこのJSFiddleデモにコピーして貼り付けました。JSFiddleが中国で許可されることを願っています：|

于 2012-06-15T02:11:38.937 に答える
5

マップにラベルを追加するには、カスタムオーバーレイを作成する必要があります。http://blog.mridey.com/2009/09/label-overlay-example-for-google-maps.htmlのサンプルでは、​​Google Maps APIから継承する（Layerから継承する）カスタムクラスを使用しています。彼は改訂版（可視性、zIndex、クリックイベントのサポートを追加）を持っています。これはhttp://blog.mridey.com/2011/05/label-overlay-example-for-google-maps.htmlにあります。OverlayViewMVCObject

次のコードは、Marc Rideyのブログ（上記の改訂されたリンク）から直接取得したものです。

レイヤークラス

// Define the overlay, derived from google.maps.OverlayView
function Label(opt_options) {
  // Initialization
  this.setValues(opt_options);


  // Label specific
  var span = this.span_ = document.createElement('span');
  span.style.cssText = 'position: relative; left: -50%; top: -8px; ' +
  'white-space: nowrap; border: 1px solid blue; ' +
  'padding: 2px; background-color: white';


  var div = this.div_ = document.createElement('div');
  div.appendChild(span);
  div.style.cssText = 'position: absolute; display: none';
};
Label.prototype = new google.maps.OverlayView;


// Implement onAdd
Label.prototype.onAdd = function() {
  var pane = this.getPanes().overlayImage;
  pane.appendChild(this.div_);


  // Ensures the label is redrawn if the text or position is changed.
  var me = this;
  this.listeners_ = [
    google.maps.event.addListener(this, 'position_changed', function() { me.draw(); }),
    google.maps.event.addListener(this, 'visible_changed', function() { me.draw(); }),
    google.maps.event.addListener(this, 'clickable_changed', function() { me.draw(); }),
    google.maps.event.addListener(this, 'text_changed', function() { me.draw(); }),
    google.maps.event.addListener(this, 'zindex_changed', function() { me.draw(); }),
    google.maps.event.addDomListener(this.div_, 'click', function() {
      if (me.get('clickable')) {
        google.maps.event.trigger(me, 'click');
      }
    })
  ];
};

// Implement onRemove
Label.prototype.onRemove = function() {
 this.div_.parentNode.removeChild(this.div_);

 // Label is removed from the map, stop updating its position/text.
 for (var i = 0, I = this.listeners_.length; i < I; ++i) {
   google.maps.event.removeListener(this.listeners_[i]);
 }
};

// Implement draw
Label.prototype.draw = function() {
 var projection = this.getProjection();
 var position = projection.fromLatLngToDivPixel(this.get('position'));

 var div = this.div_;
 div.style.left = position.x + 'px';
 div.style.top = position.y + 'px';
 div.style.display = 'block';

 this.span_.innerHTML = this.get('text').toString();
};

使用法

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>
      Label Overlay Example
    </title>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="label.js"></script>
    <script type="text/javascript">
      var marker;


      function initialize() {
        var latLng = new google.maps.LatLng(40, -100);


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


        marker = new google.maps.Marker({
          position: latLng,
          draggable: true,
          zIndex: 1,
          map: map,
          optimized: false
        });


        var label = new Label({
          map: map
        });
        label.bindTo('position', marker);
        label.bindTo('text', marker, 'position');
        label.bindTo('visible', marker);
        label.bindTo('clickable', marker);
        label.bindTo('zIndex', marker);


        google.maps.event.addListener(marker, 'click', function() { alert('Marker has been clicked'); })
        google.maps.event.addListener(label, 'click', function() { alert('Label has been clicked'); })
      }


      function showHideMarker() {
        marker.setVisible(!marker.getVisible());
      }


      function pinUnpinMarker() {
        var draggable = marker.getDraggable();
        marker.setDraggable(!draggable);
        marker.setClickable(!draggable);
      }
    </script>
  </head>
  <body onload="initialize()">
    <div id="map_canvas" style="height: 200px; width: 200px"></div>
    <button type="button" onclick="showHideMarker();">Show/Hide Marker</button>
    <button type="button" onclick="pinUnpinMarker();">Pin/Unpin Marker</button>
  </body>
</html>
于 2012-06-15T02:07:03.520 に答える
1

上記のソリューションはipad-2では機能しません

最近、マーカーの数が少なくても、マーカーのプロット中にサファリブラウザーがクラッシュする問題が発生しました。当初、私はマーカーをプロットするためにラベル付きマーカー（markerwithlabel.js）ライブラリを使用していましたが、Googleネイティブマーカーを使用すると、多数のマーカーでも正常に機能しましたが、カスタマイズされたマーカーが必要なので、jonathanによって提供された上記のソリューションを参照しますがhttp://nickjohnson.com/b/google-maps-v3-how-to-quickly-add-many-markersこのブログと今私の地図について多くの調査を行った後でもクラッシュの問題は解決されていません検索はipad-2でスムーズに機能しています:)

于 2014-07-02T04:55:44.313 に答える