web-dev-qa-db-ja.com

Google Maps APIv3のスプライトのマーカーアイコンを使用したマーカーサイズのスケーリング

Google Maps API（v3）で遊んでいますが、マーカーアイコンで問題が発生しました。個々のデータ属性に応じて、マーカーのサイズを変更しようとしています。

アイコン自体は、それぞれ16px x16pxの3つの異なる円形マーカーを含むスプライト内にあります。 個々のアイコンを拡大縮小するを試みていますが、これまでのところ成功していません。

これが私のコードです：

var offset = Math.floor(Math.random() * 3) * 16; // pick one of the three icons in the Sprite

// Calculate desired pixel-size of the marker
var size = Math.floor(4*(count-1) + 8);

// Create custom marker
var marker = new google.maps.Marker({
    position: new google.maps.LatLng(lat, lng),
    icon: new google.maps.MarkerImage(
        'img/dot.png', // my Sprite with 3 circular icons
        new google.maps.Size(16, 16), // 16x16 is the original size of each individual icon
        new google.maps.Point(0, offset), // picking one of the three icons in the Sprite
        new google.maps.Point(Math.floor(size/2), Math.floor(size/2)), // setting correct anchor for the marker
        new google.maps.Size(size, size) // trying to scale the marker
       )
    });

問題は、マーカーアイコンを目的のサイズに拡大縮小しようとしている最後の行にあるようです。適切にスケーリングする代わりに、私は奇妙で歪んだ楕円形のアイコンを取得です。

私は何が間違っているのですか？

javascriptimagegoogle-mapsgoogle-maps-api-3gis
14
Maxim Zaslavsky

試行錯誤の末、 このブログ投稿 のおかげで、これがどのように機能するかを理解しました（ドキュメントはだまされています）。

これが私の新しいコードです：

var offset = Math.floor(Math.random() * 3) * 16; // pick one of the three icons in the Sprite

// Calculate desired pixel-size of the marker
var size = Math.floor(4*(count-1) + 8);
var scaleFactor = size/16;

// Create custom marker
var marker = new google.maps.Marker({
    position: new google.maps.LatLng(lat, lng),
    icon: new google.maps.MarkerImage(
        'img/dot.png', // my 16x48 Sprite with 3 circular icons
        new google.maps.Size(16*scaleFactor, 16*scaleFactor), // desired size
        new google.maps.Point(0, offset*scaleFactor), // offset within the scaled Sprite
        new google.maps.Point(size/2, size/2), // anchor point is half of the desired size
        new google.maps.Size(16*scaleFactor, 48*scaleFactor) // scaled size of the entire Sprite
       )
    });

これが誰かの助けになることを願っています！

22
Maxim Zaslavsky