Google会映射标记图标 - 调整大小时图像质量会下降 [英] Google maps marker icons - loss in image quality when resizing
问题描述
在Google地图中调整我自己的地图标记图标（png文件）时，我遇到了图像质量问题。
I'm having icon image quality issues when resizing my own map marker icons (png files) in google maps.
以下是问题的示例：
使用Google的简单标记示例代码：（developers.google.com/maps/documentation/javascript/examples/marker-simple）
Taking Google's 'Simple markers' example code:(developers.google.com/maps/documentation/javascript/examples/marker-simple)
并且只添加一个新的'icon'对象（我相信已经从v3.11 map api替换了MarkerImage对象）给了我以下代码（ http://codepen.io/anon/pen/AIgkf?editors=100 ）：
and adding only a new 'icon' object (which I believe has replaced MarkerImage object from v3.11 maps api) gives me the following code (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图标的图像质量不是很好。白色数字的边缘变得锯齿状。
My original png is 100x100 pixels but the image quality of the resized 24x24 icon is not very good. The edges of the white numbers become jagged.
我正在使用100x100像素的原始png文件，因为我想为web和iOS / Android使用相同的图像文件应用和应用想要使用更大的地图图标来防止像素化。
I am using an original png file of 100x100 pixels because I want to use the same image file for both web and iOS/Android apps and the apps want to use larger map icons to prevent pixelisation.
浏览器行为
Chrome（Windows / Ubuntu）
图标图像质量不好 - 数字有锯齿状边缘
然而，奇怪的是，如果标记的'draggable'属性设置为'true'，Chrome会正确显示图标，即没有锯齿状边缘???
Chrome (Windows/Ubuntu)
icon image quality not good - numbers have jagged edges
Strangely however, if the marker's 'draggable' property is set to 'true', Chrome displays the icon correctly i.e. with no jagged edges???
Firefox（Windows / Ubuntu）
图标图像质量不好 - 数字有锯齿状边缘
Firefox (Windows/Ubuntu)
icon image quality not good - numbers have jagged edges
IE（Windows）
图标图像质量不好 - 数字有锯齿状边缘
IE (Windows)
icon image quality not good - numbers have jagged edges
任何人都可以建议如何让我调整大小的地图图标更好地显示？
Can anyone suggest how to get my resized map icons displaying better?
问题是原始png文件的大尺寸还是别的？当'draggable = true'时，为什么图标在Chrome中正确显示的任何想法？
Is the problem the large size of the original png file or something else? And any ideas why the icon displays correctly in Chrome when 'draggable=true'?
提前感谢
p.s.第一篇文章，道歉，如果我遗漏了任何东西
Thanks in advance
p.s. first post, apologies if I've left anything out
推荐答案
尝试在优化属性中设置标记选项 false ：
Try setting the optimized property in the marker options to false:
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
icon: myicon,
optimized: false, // <------
title: 'Test custom map icon'
});
这确保浏览器将标记呈现为单独的DOM元素，并且缩放将更好质量。
This ensures that the marker is rendered as a separate DOM element by the browser and the scaling will be better quality.
无需将可拖动设置为true。
No need to set draggable to true.
这篇关于Google会映射标记图标 - 调整大小时图像质量会下降的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
