14

Google MapsAPIv3でMarkerWithLabel拡張機能を使用しています。写真の下のラベルを中央揃えにしたいのですが。ラベルの位置を設定するLabelAnchorプロパティがあり、CSSlabelClassも次のように使用します。

var myMarker = new MarkerWithLabel(
{
    position: latlng,
    draggable: false,
    raiseOnDrag: false,
    map: map,
    labelContent: "my text",
    labelAnchor: new google.maps.Point(25, 0), //(25, 27),
    labelClass: "my_label", // the CSS class for the label
    labelStyle: {opacity: 0.8},
    icon: image,
    labelInBackground: true,
    labelVisible: true,
    clickable: true,
    zIndex: 11
});

.my_label 
{
    color: black;
    background-color: beige;
    font-family: "Lucida Grande", "Arial", sans-serif;
    font-size: 10px;
    text-align: center;
    width: auto;     
    white-space: nowrap;
    padding: 4px;
    border: 1px solid grey;
    border-radius:3px;   
    box-shadow: 2px 2px 20px #888888;
}

ラベルボックスを自動整列することは可能ですか、それともテキスト幅を計算してLabelAnchorを手動で設定する必要がありますか？もしそうなら、どのようにテキスト幅を計算しますか？

4

7 に答える 7

14

他のソリューションも機能しますが、固定幅、イベントへのフック、またはコンテンツを親コンテナーにラップして一連のスタイルを追加する必要があります。ラベルはCSSスタイルを使用できるDOM要素であるため、ラベルを中央に配置する最も簡単な方法はtransform: translateX(-50%)、CSSで使用することです。

JS：

new MarkerWithLabel({
  labelAnchor: { x: 0, y: 30 },
  labelClass: 'marker-label'
})

CSS：

.marker-label {
  transform: translateX(-50%)
}

labelAnchor Xを視覚的に中央に表示するには、1〜2ピクセルバンプする必要がある場合があります。

于 2018-10-15T09:16:23.770 に答える
11

私の解決策ではありませんが、http：//shahjahanrussell.blogspot.com.au/2013/04/make-label-text-in-center-for-google.htmlにブログ投稿があります。基本的に：

.labels{
    color: #fff;
    font-weight: bold;
    font-size: 14px;
    opacity: 1;
    pointer-events: none;
    text-align: center;
    width: 60px;
    white-space: nowrap;
}

と

function initialize() {
        map = new google.maps.Map(document.getElementById("map"), mapOptions);
        var marker = new MarkerWithLabel({
          position: new google.maps.LatLng(0,0),
          draggable: true,
          map: map,
          labelContent: "example",
          labelAnchor: new google.maps.Point(30, 0),
          labelClass: "labels", // the CSS class for the label
          labelStyle: {opacity: 0.75}
        });

      }
于 2014-01-03T02:29:57.740 に答える
1

私が見つけた最も簡単な方法は、ラベルにクラス（この場合は「map-label」）を与え、マップがロードされたら、このコードを使用して幅に基づいてラベルを再配置することです。

google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
    $('.map-label').each(function() {
        $(this).css('position', 'absolute');
        $(this).css('margin-left', '-' + ($(this).width() / 2) + 'px');
    });
});
于 2017-10-05T10:12:16.210 に答える
0

LabelAnchorを手動で計算して設定する必要がありました。それほど悪くはありませんでした...ラベルの左パディングの量と、長い文字列の平均的な文字の幅を計算し、その値の半分を追加しました。

ブラウザが予想とは異なるフォントを使用している場合、この方法は不正確になる可能性があります。このためのより良い方法は、javascriptを介してラベル幅を決定し、そこから半分にすることができる関数を作成することです。おそらく、DOMのどこかに一時的に非表示のラベルオブジェクトを作成し、jQuery関数を使用して幅をプルします。

于 2013-09-11T19:39:40.610 に答える
0

これを行うだけです：

labelContent: "<span><?php echo $airport->name ?></span>",

そして、このスタイルを使用します。

.label-airport {
    font-family: 'Arimo', sans-serif;
    font-size: 11px;
    height: 18px;
    line-height: 18px;
    overflow: visible !important;
}

.label-airport span {
    color: #333;
    background-color: white;
    display: block;
    margin-left: -50%;
    text-align: center;
    font-weight: bold;
    padding: 0px 5px 0px 5px;
    height: 18px;
    width: auto;
    display: inline-block;
    border: 1px solid #009be0;
    white-space: nowrap;
    box-shadow: 3px 3px 5px rgba(0,0,0,0.15);
}
于 2014-11-18T13:57:27.650 に答える
0

これは、ラベル幅を設定する必要のないソリューションです。マップのidleイベントが初めて発生したときに、各ラベルの位置を変更して表示します。配列を反復するためにunderscore.jsを使用しています。

$(document).ready(function() {
    // Remove setAnchor as it resets margin-left.
    MarkerLabel_.prototype.setAnchor = function() {};

    var map = new google.maps.Map(document.getElementById('map'), {});
    var markers = [];
    var locations = [];
    // …

    // Reposition each label and update the initial styles.
    google.maps.event.addListenerOnce(map, 'idle', function() {
        _.each(markers, function(marker, idx) {
            var el = $(".map-label-" + idx);
            var width = el.width();
            var css = { "margin-left": -width / 2.0 + "px", opacity: 1 };
            marker.labelStyle = css;
            el.css(css);
        });
    });

    // Create markers with `labelClass` set to `map-label`.
    // Also set the initial opacity to zero in CSS.
    _.each(locations, function(location, idx) {
        var text = document.createTextNode(location.label);
        var marker = new MarkerWithLabel({
            map: map,
            // …
            labelClass: "map-label map-label-" + idx,
            labelStyle: { opacity: 0 }
        });

        markers.push(marker);
    });
});
于 2017-08-28T12:01:59.650 に答える
-1

これを解決するには、ラベルのコンテンツをでラップします<span>。これは、幅の広い非表示のラベルdivの中央に配置されます。この方法では、最大ラベル幅を定義する必要があります。

http://jsfiddle.net/TT26w/7/

div.label {
    display:block;
    width:500px; /* Maximum width of label */
    margin-left:-250px; /* 1/2 maximum width of label */
    margin-top:-30px; /* vertical offset, negative is up */
    text-align:center;
}

div.label span {
    display:inline-block;
    padding: 5px 10px 5px 10px;
    border-radius: 5px;
    max-width:500px; /* Maximum width of label */
    min-width:50px; /* Minimum width of label */
    overflow:hidden;
    white-space: nowrap;
    text-overflow:ellipsis;
    color:white;
    background-color: rgba(80, 80, 80, 0.9);
}
于 2013-12-02T02:18:16.890 に答える