3

次のコードを使用してプッシュピンを作成しました

var pin = new Microsoft.Maps.Pushpin(data._LatLong, {
        icon: 'images/pushpin.png',        
        text: '1',
        typeName: 'pushpinStyle'
    });

デフォルトでは、プッシュピン アイコンに表示されるテキストは、アイコンの上から 5 ピクセル下にあります。画鋲アイコンの高さと幅を変更しましたが、画鋲内のテキスト形式は改善されません。プッシュピン内のテキストをフォーマットする方法。

私はたくさんグーグルで検索しましたが、正しい応答が得られませんでした。前もって感謝します

4

2 に答える 2

4

プッシュピンの typeName プロパティを指定する正しい方向に進んでいます。おそらく既にご存じのとおり、typeName を に指定するpushpinStyleと、作成された画鋲のクラスは になりpushpinStyleます。マップ上の画鋲の生成された html を調べると、画鋲のテキストが、<div>画鋲内に絶対配置された子によってリアライズされていることがわかります<div>。したがって、css を使用して画鋲のテキストをさらにスタイル設定するのが論理的です<div>。たとえば、次のことができます。

.pushpinStyle div{
    color: black !important; /*Make Pushpin text black*/
    left: 5px !important;  /*Since Pushpin text is absolutely positioned, this will cause the text to be 5 pixels from the left instead of 0 pixels */
    text-shadow: 1px 0px white, -1px 0px white, 0px -1px white, 0px 1px white;  /*Give the text all around white text shadow so it looks nice on browsers that support it*/
    font: 12px arial,sans-serif; !important // override default fonts 
}

これにより、画鋲のテキスト<div>が上記のスタイルになります。もちろん、アプリケーションに合わせて独自のスタイルを追加することもできます。

于 2012-03-21T20:45:01.253 に答える
0

私は実際にhtmlContent画鋲のオプションを使用しています:

var pin = new Microsoft.Maps.Pushpin(data._LatLong, {
    typeName: 'pushpinStyle',
    htmlContent: '<img src="images/pushpin.png" alt=""/>' +
                 '<span>'+resultNum.toString()+'</span>'
});

このようにして、@ Bojin Liのソリューションのように !important スタイルを使用する厄介さはありません... とにかくモバイルで問題を引き起こしていることに気付きました。マップをスクロールするたびに、マップが再び動かなくなるまで、カスタム スタイルが削除されます。これは、信じられないほど柔軟な構成オプションでもあります。任意の html をそこに入れることができます。

API リファレンス: http://msdn.microsoft.com/en-us/library/gg427629.aspx

于 2014-06-30T18:56:27.663 に答える