3

スプライトを Google マップ マーカーとして使用したい場合は、次のように配置する必要があることを学びました。

var myIcon = new google.maps.MarkerImage(
    "../public/img/categories.png",
    new google.maps.Size(90, 50),
    new google.maps.Point(0, data[i].subcategory_id * 50)
);

// as I understand: 
// new google.maps.MarkerImage(url, original size, anchor point);

Retina-proofにするときは、次のようにする必要があることを理解しています。

//new google.maps.MarkerImage(url, original size, anchor point, null, half size);
var myIcon = new google.maps.MarkerImage(
    "../public/img/categories.png",
    new google.maps.Size(90,50),
    new google.maps.Point(0, data[i].subcategory_id * 50),
    null,
    new google.maps.Size(45,25)
);

ただし、余分なサイズを追加すると、マーカーがなくなります。私は何を間違っていますか？

4

3 に答える 3

3

@duncanが言ったように、アイコンクラスを使用する必要があります。

var myIcon {
  url: "../public/img/categories.png",
  size: new google.maps.Size(45,25), // the size it should be on the map
  scaledSize: new google.maps.Size(45,550), // the normal size of the image is 90x1100 because Retina asks double size.
  origin: new google.maps.Point(0, 25) // position in the sprite                   
};

これは私を助けました、ありがとう！

于 2014-04-22T14:27:55.507 に答える
1

はい、google.maps.Icon クラスを使用する方法です。

スプライト画像ベース、Retina サポート、デフォルト以外のアンカーを適切に処理してマーカーを追加する完全なデモ:

var marker = new google.maps.Marker({
    position: latLng,
    title: 'My Marker',
    map: myMap,
    // google.maps.Icon
    icon: {
        url: 'img/marker.png',

        // base image is 60x60 px
        size: new google.maps.Size(60, 60),

        // we want to render @ 30x30 logical px (@2x dppx or 'Retina')
        scaledSize: new google.maps.Size(30, 30), 

        // the most top-left point of your marker in the sprite
        // (based on scaledSize, not original)
        origin: new google.maps.Point(0, 0),

        // the "pointer"/anchor coordinates of the marker (again based on scaledSize)
        anchor: new google.maps.Point(25.5, 29)
    }
});

Google によるデモはこちらにあります。

于 2016-07-06T05:29:26.133 に答える