传单自定义标记图标缩放
Leaflet custom marker icon scale to zoom
>我使用传单绘制OpenStreetMap并附上自定义图标标记
var mymap = L.map('mapid').setView([x, y], 13);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
maxZoom: 18,
id: ID,
accessToken: accessToken
}).addTo(mymap);
var busIcon = new L.Icon({
iconUrl: 'images/marker/bus.png',
// shadowUrl: 'images/leaflet/marker-shadow.png',
iconSize: [12, 12],
iconAnchor: [12, 41],
popupAnchor: [1, -34],
// shadowSize: [41, 41]
});
var marker = L.marker([x, y],{icon:busIcon}).addTo(mymap);
mymap.on('zoomed', function() {
var currentZoom = mymap.getZoom();
busIcon = new L.Icon({
iconUrl: 'images/marker/bus.png',
iconSize: [mymap.getZoom*2, mymap.getZoom*2],
iconAnchor: [12, 41],
popupAnchor: [1, -34],
});
marker.setIcon(busIcon);
});
现在我想根据缩放级别调整标记图标的大小。我上面的代码有问题。我该怎么办?如果标记是一个CircleMaker
,有一个setRadius
函数让我轻松处理这个问题。但是在这种情况下,标记是一个自定义图标,我尝试了上述方法并失败了。如何解决?
正如 YaFred 所说,有一些错别字,比如 zoomend
,但也有一些应该mymap.getZoom
mymap.getZoom()
我对这个老问题做出了新的回答,以提出更有效的解决方案。您可以向图标添加className
(请参阅传单文档)。这意味着我们可以通过 css 编辑图标的高度和宽度!在 zoomend
函数中,只需调用此 JQuery,即可创建新图标:
var newzoom = '' + (2*(mymap.getZoom())) +'px';
$('#mapid .YourClassName').css({'width':newzoom,'height':newzoom});
对于大量标记,这将显著提高您的性能,如以下堆栈溢出问题中所述:传单自定义图标在缩放时调整大小。性能图标与divicon
你有一个错别字:缩放应该是缩放
map.on('zoomend', function() {
});
http://plnkr.co/edit/72ywrO8pgmmxLW6Y8mcL?p=preview
除此之外,我会创建并将图标保留在 zoomend 回调之外。
实际上,每次缩放更改时,您的代码都会创建一个图标。
相关文章:
- 更改高贴图的缩放级别
- 在不阻止默认行为的情况下检测IE10中的缩放
- 单击超链接时,如何使用Google Maps API v3缩放地图
- 缩放Raphael/SVG容器以适应所有内容
- 传单缩放控制位置错误
- 在不移动内部文本的情况下缩放元素的效果
- 调整缩放窗口高度提升缩放
- 计算CSS3缩放框在另一个框中的最高位置
- D3.JS向rect添加缩放和列表项
- 当我在节点上拖动鼠标时,我如何防止使用d3.ehavior.zoom().on(“缩放”,重绘)
- 将直流图表库中的折线图缩放限制为小时
- 为什么缩放按钮不会显示在照片擦除中
- 动态设置谷歌地图缩放
- 如何缩放像图像一样的元素
- 传单自定义标记图标缩放
- 使用3d模型作为图标,而无需在Google地球插件中进行缩放
- 使用缩放更改谷歌地图自定义图标
- 根据地图缩放级别更改标记图标图像
- 宣传单:根据缩放级别改变图标
- 根据缩放级别更改图标