javascript - 谷歌地图 MarkerImage 精灵是空白的（不可见，透明）

Question

我正在使用图像精灵来定义 Google 地图 (v3) 标记对象的 MarkerImage。精灵图像从 0,0（左上角）向下 100 像素。代码如下：

(function () {
    var icon = new google.maps.MarkerImage(
       "//localhost:8000/public/img/sprite.png",
        new google.maps.Size(25, 25),
        new google.maps.Point(0, -100));
    var position = new google.maps.LatLng(39.27, -105.99);
    var marker = new google.maps.Marker({icon: icon, position: position});
    marker.setMap(map);
}());

这段代码是正确的。然而，标记图像不显示。

注意：我已经找到了解决此问题的方法。我正在创建这个问题，因为它还没有在这里得到回答。它可能会节省很多时间，就像对我一样。

Answer 1

出于某种荒谬的原因，Google 期望一个正的 y 轴值向下遍历（负数，以图形方式绘制）图像精灵。

如果您要在 CSS 中设置 (0, -100) 的背景位置，则必须将 (0, 100) 传递给 Google。