Question

我的谷歌地图使用从精灵表加载的自定义标记引脚，一切按预期工作，1x，2x和3x显示预期@ 2x，@ 3x图像显示为原始尺寸的三倍的两倍图像。

如果我在@ 2x和@ 3x显示时尝试将其缩放到1x尺寸，则标记会显示没有图像。

谷歌周围的建议表明我正在做的一切正确，图标配置基于文档。

是否有人能够发现我的scaledImage配置可能出现的问题？

if(devicePixelRatio > 1) {
  pinImage['scaledSize'] = new google.maps.Size(15, 36);
}

JavaScript提取代码：

var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

// Retina support
var requireImagePrefix = "";
var devicePixelRatio = (window.devicePixelRatio===undefined?1:window.devicePixelRatio);

if(devicePixelRatio == 2) {
  requireImagePrefix = "@2x";
}
else if(devicePixelRatio == 3) {
  requireImagePrefix = "@3x";
}

// Image for the marker
var pinImage = {
  url: "/assets/sprite" + requireImagePrefix + ".png",
  size: new google.maps.Size(15*devicePixelRatio, 36*devicePixelRatio),
  origin: new google.maps.Point(430*devicePixelRatio, 20*devicePixelRatio),
};

if(devicePixelRatio > 1) {
  pinImage['scaledSize'] = new google.maps.Size(15, 36);
}

var officeMarker = new google.maps.Marker({
  position: hqLocation,
  map: map,
  title: "Anomaly HQ",
  icon: pinImage,
  optimized: false
});

非常感谢你的时间。

Answer 1

我在上面的错误是：

scaledSize参数是1x精灵的尺寸
我们不需要将size和origin参数乘以宽高比

我已将更新的解决方案发布为Git哦Github

Google使用视网膜支持从精灵表中映射自定义标记图标配置

1 个答案: