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所说，我需要使用图标类。

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 class是可行的方法。

完整演示添加标记，并对精灵图像库，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的演示存在here。

Answer 3

这已更新：

scaledSize ：缩放后整个图像的大小（如果有）。使用此属性可拉伸/缩小图像或精灵。

尺寸：精灵或图片的显示尺寸。使用精灵时，必须指定精灵大小。如果未提供尺寸，则会在图像加载时设置。

所以现在应该是：

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

从精灵和视网膜证明自定义谷歌地图标记

3 个答案: