從精靈和視網膜證明自定義谷歌地圖標記

Question

我已經了解到，當我想使用精靈作為谷歌地圖標記時，我需要這樣說：

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);

當使它成為視網膜防護時，我明白我需要這樣做：

//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)
);

但是，當添加額外的大小時，我的標記不再存在。 我究竟做錯了什么？

Answer 1

就像@duncan說的那樣，我需要使用icon類。

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                   
};

這幫助了我，謝謝！

Answer 2

是的，使用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)
    }
});

谷歌的一個演示就在這里 。

Answer 3

這已更新：

scaledSize ： 縮放后整個圖像的大小（如果有）。 使用此屬性可拉伸/縮小圖像或精靈。

size ： 精靈或圖像的顯示大小。 使用精靈時，必須指定精靈大小。 如果未提供尺寸，則將在圖像加載時設置。

所以現在它應該是：

var myIcon {
  url: "../public/img/categories.png",
  size: new google.maps.Size(90,50), // the orignal size
  scaledSize: new google.maps.Size(45,25), // the new size you want to use
  origin: new google.maps.Point(0, 25) // position in the sprite                   
};