9

スプライト画像を Google マップ マーカーとして配置するにはどうすればよいですか。例：cssでは、画像を次のように配置しています

background: url('../images/bodycss/pointer.png') 28px -32px;

上記のコードを以下の google api-v3 関数に含めるにはどうすればよいですか?

function setMarkers(map, markers) {

    var google_image = new google.maps.MarkerImage("http://example.com/images/bodycss/pointer.png");

    for (var i = 0; i < markers.length; i++) {
        var sites = markers[i];
        var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
        var marker = new google.maps.Marker({
            position: siteLatLng,
            map: map,
            title: sites[0],
            zIndex: sites[3],
            html: sites[4],
            icon: google_image
        });

        google.maps.event.addListener(marker, "mouseover", function () {
            infowindow.setContent(this.html);
            infowindow.open(map, this);
        });
    }
}
4

3 に答える 3

20

スプライト画像から MarkerImage を作成するには、アイコンの作成に使用する画像のセクションの原点とサイズを指定する必要があります。

var icon = new google.maps.MarkerImage("http://domain/path/sprite.png", new google.maps.Size(12, 20), new google.maps.Point(100, 34));

それをよく説明しているこのブログ投稿を見ることができます

更新- この動作中の Fiddle- DEMOを参照してください(スプライト URL は無効です)

この画像を使用しました- http://www.ipreferjim.com/site/wp-content/uploads/2012/10/markers.png?9d7bd4 (スプライトの URL は無効です) を使用し、アイコンのサイズとポイント値を調整しました。

于 2012-12-10T04:51:33.897 に答える
4

MarkerImage クラスが非推奨になる前 (つまり、まだサポートされていますが、置き換える必要があります)、Icon オブジェクトを優先して、単純な画像に対して次のように記述した可能性があります。

var qthIconHouse20 = new google.maps.MarkerImage( 'grafx/house_icon_20.png',
                                    new google.maps.Size(20, 20),
                                    new google.maps.Point(0, 0),
                                    new google.maps.Point(10, 10) );

ここで、Icon オブジェクトを使用して、次のように記述します。

var qthIconHouse20 = {  
  url:        'grafx/house_icon_20.png',
  size:       new google.maps.Size(20, 20),
  origin:     new google.maps.Point(0, 0),
  anchor:     new google.maps.Point(10, 10),
  scaledSize: new google.maps.Size(20, 20)
};

追加の scaledSize パラメータに注意してください。単純な画像の場合、これは元の画像のサイズです。この特定のケースでは、これは size パラメータと同じです。

単一の画像ファイルに複数の画像が含まれるスプライトの場合、次のようなものを使用できます。

var qthIconBlueSpot16 = {
  url:        'grafx/qth_icon_spots_16.png',
  size:       new google.maps.Size(16, 16),
  origin:     new google.maps.Point(0, 32),
  anchor:     new google.maps.Point(8, 8),
  scaledSize: new google.maps.Size(16, 48)
};

この例では、複数の 16*16 ピクセル画像を含むスプライトで原点が (0, 32) として指定されていることに注意してください。したがって、ここでは、スプライトの3 番目の画像を選択しています。画像のその部分内で、アンカーを (8, 8) に設定します。つまり、画像の選択された部分の中央に表示されます。最後に、ここでの scaledSize は、スプライト イメージ全体のサイズを指します。

于 2014-06-30T10:18:50.810 に答える
1

ここに記載されているように、 whichのanchorプロパティを使用して、デフォルトの位置をオーバーライドできます。MarkerImage

地図上のマーカーの位置に対応する画像を固定する位置。デフォルトでは、アンカーは画像の下部の中心点に沿って配置されます。

ps MarkerImage は非推奨です。代わりにアイコンを使用することを検討してください。

于 2012-12-09T06:26:12.327 に答える