3

我了解到，当我想使用精灵作为谷歌地图标记时，我需要这样写：

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

但是，当添加额外的尺寸时，我的标记不再存在。我究竟做错了什么？

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 回答
0

这已更新：

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                   
};
于 2015-01-15T13:54:02.730 回答