每次减小圆圈图标比例时,笔划会变得越来越大
Stroke appears bigger and bigger each time circle icon scale is reduced
我创建了一张缩放比例为 4 的新地图:
map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: new google.maps.LatLng(39.9526, -98.5795),
mapType: 'terrain'
});
我监听 zoom_changed 事件,以便我可以使用新的比例重新绘制我的标记:
google.maps.event.addListener(map, 'zoom_changed', function () {
var zoom = map.getZoom();
$log.debug("zoom: " + zoom);
我在这里创建我的新图标:
var greenMarkerIcon = {
path: google.maps.SymbolPath.CIRCLE,
fillOpacity: 1,
fillColor: "green",
strokeWeight: 1,
scale: map.getZoom()
}
当我放大时,一切看起来都很可爱。当我向下钻取时,图标的比例会变大。缩小是问题所在:
Click here for image of icon after reducing scale
圆的边界越来越大。我为 icon.strokeWeight 属性 添加了一条调试语句,它一直保持为 1。我吹走了我所有的旧标记并再次重新绘制它们,所以我不知道为什么单个标记 strokeWeight 看起来更大。
有什么想法吗?
我假设您想在地图缩放时更改标记图标比例,并且标记应 smaller/bigger 而不更改笔划。然后你只需要更改图标比例并将其设置为标记:
google.maps.event.addListener(map, 'zoom_changed', function () {
var zoom = map.getZoom();
console.log("zoom: " + zoom);
greenMarkerIcon.scale = (zoom + 1) * scale; // +1 is for avoiding zoom=0, scale is initial scale of icon
marker.setIcon(greenMarkerIcon);
});
提供的答案是正确的。
我发现我做错了什么。每次用户单击缩放按钮时,我都会创建一个新标记。标记应仅创建一次,并且应在缩放时更改相关图标。
谢谢。
我创建了一张缩放比例为 4 的新地图:
map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: new google.maps.LatLng(39.9526, -98.5795),
mapType: 'terrain'
});
我监听 zoom_changed 事件,以便我可以使用新的比例重新绘制我的标记:
google.maps.event.addListener(map, 'zoom_changed', function () {
var zoom = map.getZoom();
$log.debug("zoom: " + zoom);
我在这里创建我的新图标:
var greenMarkerIcon = {
path: google.maps.SymbolPath.CIRCLE,
fillOpacity: 1,
fillColor: "green",
strokeWeight: 1,
scale: map.getZoom()
}
当我放大时,一切看起来都很可爱。当我向下钻取时,图标的比例会变大。缩小是问题所在:
Click here for image of icon after reducing scale
圆的边界越来越大。我为 icon.strokeWeight 属性 添加了一条调试语句,它一直保持为 1。我吹走了我所有的旧标记并再次重新绘制它们,所以我不知道为什么单个标记 strokeWeight 看起来更大。
有什么想法吗?
我假设您想在地图缩放时更改标记图标比例,并且标记应 smaller/bigger 而不更改笔划。然后你只需要更改图标比例并将其设置为标记:
google.maps.event.addListener(map, 'zoom_changed', function () {
var zoom = map.getZoom();
console.log("zoom: " + zoom);
greenMarkerIcon.scale = (zoom + 1) * scale; // +1 is for avoiding zoom=0, scale is initial scale of icon
marker.setIcon(greenMarkerIcon);
});
提供的答案是正确的。
我发现我做错了什么。每次用户单击缩放按钮时,我都会创建一个新标记。标记应仅创建一次,并且应在缩放时更改相关图标。
谢谢。