21

結果ごとに ajax の成功にマーカーが設定されている場合、マーカーにラベルを追加するにはどうすればよいですか。

map.gmap('addMarker', { 'position': new google.maps.LatLng(result.latitude, result.longitude) });

私はこのように試みましたが、成功しませんでした:

map.gmap('addMarker', { 
    'position': new google.maps.LatLng(result.latitude, result.longitude), 
    'bounds': true,
    'icon': markerIcon,
    'labelContent': 'A',
    'labelAnchor': new google.maps.Point(result.latitude, result.longitude),
    'labelClass': 'labels', // the CSS class for the label
    'labelInBackground': false
});
4

5 に答える 5

21

標準ライブラリがこれをサポートしているとは思えません。

ただし、Google マップ ユーティリティ ライブラリを使用できます。

http://code.google.com/p/google-maps-utility-library-v3/wiki/Libraries#MarkerWithLabel

var myLatlng = new google.maps.LatLng(-25.363882,131.044922);

var myOptions = {
    zoom: 8,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);

var marker = new MarkerWithLabel({
   position: myLatlng,
   map: map,
   draggable: true,
   raiseOnDrag: true,
   labelContent: "A",
   labelAnchor: new google.maps.Point(3, 30),
   labelClass: "labels", // the CSS class for the label
   labelInBackground: false
 });

マーカーの基本については、https ://developers.google.com/maps/documentation/javascript/overlays#Markers を参照してください。

于 2012-06-19T07:20:00.867 に答える
9

バージョン 3.21 (2015 年 8 月) で、1 文字のマーカー ラベルのサポートがGoogle マップに追加されました。新しいマーカー ラベル APIを参照してください。

次のようにラベル マーカーを作成できます。

var marker = new google.maps.Marker({
  position: new google.maps.LatLng(result.latitude, result.longitude), 
  icon: markerIcon,
  label: {
    text: 'A'
  }
});

1 文字制限の解除を希望する場合は、この問題に投票してください。

2016 年 10 月の更新:

この問題は修正され、バージョン 3.26.10 の時点で、Google マップはMarkerLabelsを使用したカスタム アイコンと組み合わせて複数の文字ラベルをネイティブにサポートしています。

于 2015-09-08T17:20:51.393 に答える
7

プラグインを使用せずにこれを行う方法は、Google の OverlayView() メソッドのサブクラスを作成することです。

https://developers.google.com/maps/documentation/javascript/reference?hl=en#OverlayView

カスタム関数を作成してマップに適用します。

function Label() { 
    this.setMap(g.map);
};

サブクラスのプロトタイプを作成し、HTML ノードを追加します。

Label.prototype = new google.maps.OverlayView; //subclassing google's overlayView
Label.prototype.onAdd = function() {
        this.MySpecialDiv               = document.createElement('div');
        this.MySpecialDiv.className     = 'MyLabel';
        this.getPanes().overlayImage.appendChild(this.MySpecialDiv); //attach it to overlay panes so it behaves like markers

}

API ドキュメントに記載されているように、remove 関数と draw 関数も実装する必要があります。実装しないと機能しません。

Label.prototype.onRemove = function() {
... // remove your stuff and its events if any
}
Label.prototype.draw = function() {
      var position = this.getProjection().fromLatLngToDivPixel(this.get('position')); // translate map latLng coords into DOM px coords for css positioning
var pos = this.get('position');
            $('.myLabel')
            .css({
                'top'   : position.y + 'px',
                'left'  : position.x + 'px'
            })
        ;
}

それが要点です。特定の実装でさらに作業を行う必要があります。

于 2013-04-24T19:31:35.243 に答える