谷歌地图标记图标 - 调整大小时图像质量下降答案

【问题标题】：Google maps marker icons - loss in image quality when resizing谷歌地图标记图标 - 调整大小时图像质量下降
【发布时间】：2014-08-14 14:30:05
【问题描述】：

在 Google 地图中调整我自己的地图标记图标（png 文件）的大小时，我遇到了图标图像质量问题。

这是一个问题的例子：

采用 Google 的“简单标记”示例代码：(developers.google.com/maps/documentation/javascript/examples/marker-simple)

并且只添加一个新的“图标”对象（我相信它已经从 v3.11 maps api 中替换了 MarkerImage 对象）给我以下代码 (http://codepen.io/anon/pen/AIgkf?editors=100)：

<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Simple markers</title>
    <style>
        html, body, #map-canvas {
            height: 100%;
            margin: 0px;
            padding: 0px
        }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script>
        function initialize() {
            var myLatlng = new google.maps.LatLng(-25.363882, 131.044922);

            var mapOptions = {
                zoom: 4,
                center: myLatlng
            }

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

            var myicon = {
                url: 'https://bnuviq.dm2301.livefilestore.com/y2pOGYfm607bdir1fks45DMUo0i9S-R5cZ1yc2Fy6kE6UAqf9qlmcHnwSeMvLrnAFz4YEFrYEu3JxMZBWHOxloZdlHmRhsuZmQR4rdP1G7K76o/blue_20.png?psid=1',
                origin: new google.maps.Point(0, 0),
                scaledSize: new google.maps.Size(24, 24),
                anchor: new google.maps.Point(12, 12)
            };

            var marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
                icon: myicon,
                //draggable: true,        // uncomment this draggable property or set draggable=false and icon displays correctly in Chrome???
                title: 'Test custom map icon'
            });
        }

        google.maps.event.addDomListener(window, 'load', initialize);

    </script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>

我的原始 png 是 100x100 像素，但调整后的 24x24 图标的图像质量不是很好。白色数字的边缘变得锯齿状。

我正在使用 100x100 像素的原始 png 文件，因为我想为 Web 和 iOS/Android 应用程序使用相同的图像文件，并且应用程序想要使用更大的地图图标来防止像素化。

浏览器行为：

Chrome (Windows/Ubuntu)
图标图像质量不佳 - 数字边缘呈锯齿状
然而奇怪的是，如果标记的“可拖动”属性设置为“真”，Chrome 会正确显示图标，即没有锯齿状边缘？？？

火狐（Windows/Ubuntu）
图标图像质量不佳 - 数字边缘呈锯齿状

IE (Windows)
图标图像质量不佳 - 数字边缘呈锯齿状

谁能建议如何让我调整大小的地图图标显示得更好？

问题是原始png文件的大尺寸还是其他问题？以及为什么图标在“draggable=true”时在 Chrome 中正确显示的任何想法？

提前致谢
p.s.第一次发帖，如有遗漏请见谅

【问题讨论】：

如果您在 javascript 中动态调整标记大小时遇到图像质量问题，为什么不在图像编辑器中调整原始标记的大小（使图像成为您想要的大小）？
希望为 Web 和 iOS/Android 应用程序使用相同的高分辨率图标/图像文件，每个消费者都可以根据需要调整大小。我试图避免有多个图标文件大小，每个消费者一个。

标签： google-maps resize icons marker

【解决方案1】：

尝试将标记选项中的 optimized 属性设置为 false：

 var marker = new google.maps.Marker({
                position: myLatlng,
                map: map,
                icon: myicon,
                optimized: false,   // <------
                title: 'Test custom map icon'
            });

这样可以确保标记被浏览器呈现为单独的 DOM 元素，并且缩放质量会更好。

无需将 draggable 设置为 true。

【讨论】：

【解决方案2】：

在 Maps V3 中，当您添加不可拖动的自定义标记时，地图会将其绘制在 google 服务器的地图图块上，然后将其发送给您。当你将它标记为可拖动时，它就变成了它自己的 DOM 对象。当它是它自己的 DOM 对象时，浏览器会处理图标的大小调整，当它在 google 上调整大小时，它们的服务器会处理它。在我看来，谷歌用来调整图标大小的算法不如浏览器使用的算法好。（此外，Chrome 使用的算法比 FF 中的算法要好，至少在处理文本大小方面）。

您是否考虑过使用不含文字的自定义图标？调整大小后，它们肯定会看起来更好。您可以随时在信息窗口中添加文本...

【讨论】：

感谢您的回复。我的测试肯定证实了你所说的正在发生。不幸的是，我真的需要使用我自己的自定义编号标记。如果我提供标准 Google 地图图钉的质量更好/更大的 png 文件，我什至会遇到明显锯齿状边缘的问题。我有点惊讶以前没有人遇到过这个问题，但我找不到任何内容或任何“最佳实践”来创建您自己的自定义地图图标？？？