谷歌地图标记图标-损失的图像质量时，调整大小

我在谷歌地图中调整我自己的地图标记图标(png文件)时遇到图标图像质量问题。

下面是这个问题的一个例子:

以谷歌的"简单标记"为例代码:(developers.google.com/maps/documentation/javascript/examples/marker-simple)

和只添加一个新的"图标"对象(我相信它已经取代了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应用程序使用相同的图像文件，应用程序想使用更大的地图图标来防止像素化。

浏览器的行为:

铬(Windows/Ubuntu)
图标图像质量不好-数字有锯齿状边缘
然而奇怪的是，如果标记的"可拖拽"属性设置为"真"，Chrome显示图标正确，即没有锯齿边缘??

Firefox (Windows/Ubuntu)
图标图像质量不好-数字边缘参差不齐

IE (Windows)
图标图像质量不好-数字边缘参差不齐

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

问题是原始png文件的大尺寸还是其他东西?和任何想法为什么图标显示正确在Chrome当'draggable=true'?

提前致谢
附注:第一个帖子，如果我遗漏了什么，请道歉

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

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

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

无需设置draggable为true

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

你考虑过使用没有文本的自定义图标吗?当调整大小时，它们肯定会看起来更好。

相关内容

最新更新

热门标签：