13

世界地図を使用するために、jQueryプラグインjvectormapを実装しました。これを除いて、すべてが完全に機能しています。いくつかのマーカーを追加し、マーカーのラベル/ツールチップにHTMLを実装しようとしています。したがって、マーカーにカーソルを合わせると、「blabla」だけでなく、image/htmlが表示されるようにします。

どうすればこの結果を達成できますか？

JSの初期化は次のとおりです。

$('#map').vectorMap({
    markerStyle: {
      initial: {
        fill: '#F8E23B',
        stroke: '#383f47'
      }
    },
    backgroundColor: '#383f47',
    markers: [
      {latLng: [46.90, 8.45], name: "<img src=\"img/logo.png\">"}
    ],
...(other code isn't important)...

重要な部分はname: "<img src=\"img/logo.png\">"

助けてくれてありがとう！！

4

1 に答える 1

13

マーカーの上にマウスを置いたときに表示されるラベル/ツールチップをカスタマイズする場合は、onMarkerLabelShowの関数を提供する必要があります。

onMarkerLabelShow 関数(Event e, Object label, String code)は、マーカーラベルが表示される直前に呼び出されます。

例えば：

$('#map').vectorMap({
    markerStyle: {
      initial: {
        fill: '#F8E23B',
        stroke: '#383f47'
      }
    },
    backgroundColor: '#383f47',
    markers: [
      {latLng: [46.90, 8.45], name: "My marker name"}
    ],
    onMarkerLabelShow: function(event, label, code) {
     label.html("<img src=\"img/logo.png\"><br>"+ label.html());                
    }
});
于 2012-10-18T01:07:16.267 に答える