Question

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

以下是问题的一个示例：

采用Google的简单标记＆＃39;示例代码：（developers.google.com/maps/documentation/javascript/examples/marker-simple）

并仅添加一个新的图标＆＃39;对象（我认为已经从v3.11映射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）
图标图像质量不好 - 数字有锯齿状边缘
然而，奇怪的是，如果标记“可拖动”的话。属性设置为＆＃39; true＆＃39;，Chrome正确显示图标，即没有锯齿状边缘???

Firefox（Windows / Ubuntu）
图标图像质量不好 - 数字有锯齿状边缘

IE（Windows）
图标图像质量不好 - 数字有锯齿状边缘

有人可以建议如何让我调整大小的地图图标显示更好吗？

问题是原始png文件的大尺寸还是别的？当＆gt; draggable = true＆＃39;？

时，为什么图标在Chrome中正确显示的任何想法

提前致谢
附：第一篇文章，如果我遗漏了任何内容，请道歉

Answer 1

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

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

这确保浏览器将标记呈现为单独的DOM元素，并且缩放将具有更好的质量。

无需将可拖动设置为true。

Answer 2

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

您是否考虑过使用没有文字的自定义图标？调整大小时，它们肯定会更好看。你总是可以在infowindow中添加文本......

Google会映射标记图标 - 调整大小时图像质量会下降

2 个答案: