Javascript 标签仅在缩放传单时显示_Javascript_Leaflet_Label_Zooming_Markers

Javascript 标签仅在缩放传单时显示

javascript leaflet

Javascript 标签仅在缩放传单时显示,javascript,leaflet,label,zooming,markers,Javascript,Leaflet,Label,Zooming,Markers,我正在制作传单中的地图，每个标记最多有两个标签： var redIcon = new L.Icon({ iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-red.png', shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shado

我正在制作传单中的地图，每个标记最多有两个标签：

var redIcon = new L.Icon({
  iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-red.png',
  shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
  iconSize: [25, 41],
  iconAnchor: [12, 41],
  popupAnchor: [1, -34],
  shadowSize: [41, 41]
});

var marker1 = L.marker([25.777085, -80.193935], {icon: redIcon}).addTo(mymap);
var marker2 = L.marker([25.759461, -80.204921], {icon: redIcon}).addTo(mymap);

marker1.bindPopup('<div style="line-height: 1.2em;"><table align="center" border="0"  cellpadding=".25" cellspacing=".25" width="95%"><tbody><tr><td colspan="2"><div style="padding: 0.1em; background-color: rgb(0,0,255); text-align: center;"><b style="color:white;">Number 1</b></div></td></tr><tr><td style="text-align: center;"> <strong>$456K </strong><br><strong>2 </strong>bd |&nbsp;<strong>2 &nbsp;</strong>ba |&nbsp;<strong>1,008 </strong>sqft<br><img src="https://static.pexels.com/photos/189349/pexels-photo-189349.jpeg" height="50px" width="50px"/></td><td style="text-align: left;">&nbsp;</td></tr></tbody></table></div>');
marker1.on('mouseover', function (e) {
            this.openPopup();
        });
        marker1.on('mouseout', function (e) {
            this.closePopup();
        });

function createLabel(layer, text, count){
    //removeLabel(layer);
    var icon = createStaticLabelIcon(text);
  var testspan = document.createElement("span");
  document.body.appendChild(testspan); 

  testspan.className = "textwidth";
  testspan.style.fontSize = "10px";
  testspan.innerHTML = text;
  var width = testspan.clientWidth +11;
  var posY = 0;
  if( count == 1){
     posY = -4;
  } else if( count == 2){
     posY = -24;
  }

  icon.options.iconAnchor = [width  / 2, posY]; //That the label is centered

  var label = L.marker(layer.getLatLng(),{icon: icon}).addTo(mymap);
  layer.appendedLabel = label;

  document.body.removeChild(testspan); 
}

function createStaticLabelIcon(labelText) {
    return L.divIcon({
        className: "leaflet-marker-label",
        html: '<span class="leaflet-marker-iconlabel" style="background: #CB2B3E; color: #FFFFFF;";>'+labelText+'</span>',
        text: labelText,
    });
}

createLabel(marker1, "Label 1.1",1);
createLabel(marker1, "Label 1.2",2);
createLabel(marker2, "Label 2",1);

然后，我添加了一些代码，这些代码只应在特定的缩放级别下显示标签，但不起作用：

var show_label_zoom = 20; // zoom level threshold for showing/hiding labels
var labels_visible = true;
function show_hide_labels() {
    var cur_zoom = mymap.getZoom();
    if(labels_visible && cur_zoom < show_label_zoom) {          
        labels_visible = false;
        mymap.eachLayer(layer => layer.hideLabel && layer.hideLabel());               
    }
    else if(!labels_visible && cur_zoom >= show_label_zoom) {           
        labels_visible = true;
        mymap.eachLayer(layer => layer.showLabel && layer.showLabel());               
    }
}
mymap.on('zoomend', show_hide_labels);
show_hide_labels();

var show\u label\u zoom=20；//显示/隐藏标签的缩放级别阈值
var labels_visible=真；
函数show_hide_labels（）{
var cur_zoom=mymap.getZoom（）；
如果（标签可见和当前缩放<显示标签缩放）{
标签可见=假；
mymap.eachLayer（layer=>layer.hideLabel&&layer.hideLabel（））；
}
如果（！labels\u visible&&cur\u zoom>=显示标签\u zoom）{
标签可视=真；
mymap.eachLayer（layer=>layer.showLabel&&layer.showLabel（））；
}
}
mymap.on（'zoomend'，显示隐藏标签）；
显示隐藏标签（）；

你知道为什么这不起作用吗

更新2:

我试图实现这个线程的答案，但仍然不起作用。这是整个脚本。我是否遗漏了一些重要的细节，使其无法正常工作

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
   integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
   crossorigin=""/>
   <link type="text/css" rel="stylesheet" href="style.css" />
  <!-- Make sure you put this AFTER Leaflet's CSS -->
 <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
   integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
   crossorigin="">
   </script>
  <style> 
    #mapid { height: 350px; }
  </style>
</head>
<body>
  <div id="mapid"></div>
  <script>
    var mymap = L.map('mapid').setView([25.7741728, -80.19362], 12);

    var fg = L.featureGroup().addTo(mymap);

    L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 18,
    id: 'mapbox/light-v10',
    tileSize: 512,
    zoomOffset: -1,
    accessToken: 'pk.eyJ1IjoiamFtZXNyYSIsImEiOiJja2xoNnVzdmUwMGxpMnVtZ2NheGxlanFqIn0.dx40peACrjwV9CfQpFhGpg'
}).addTo(mymap);


var redIcon = new L.Icon({
  iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-red.png',
  shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
  iconSize: [25, 41],
  iconAnchor: [12, 41],
  popupAnchor: [1, -34],
  shadowSize: [41, 41]
});

var marker1 = L.marker([25.777085, -80.193935], {icon: redIcon}).addTo(mymap);
var marker2 = L.marker([25.759461, -80.204921], {icon: redIcon}).addTo(mymap);

function createLabel(layer, text, count){
    //removeLabel(layer);
  var icon = createStaticLabelIcon(text, count);
  var testspan = document.createElement("span");
  document.body.appendChild(testspan); 

  testspan.className = "textwidth";
  testspan.style.fontSize = "10px";
  testspan.innerHTML = text;
  var width = testspan.clientWidth +11;
  var posY = 0;
  if( count == 1){
     posY = -4;
  } else if( count == 2){
     posY = -24;
  }

  icon.options.iconAnchor = [width  / 2, posY]; //That the label is centered

  var label = L.marker(layer.getLatLng(),{icon: icon}).addTo(fg);
  layer.appendedLabel = label;

  document.body.removeChild(testspan); 
}

function createStaticLabelIcon(labelText, count) {
if (count == 1) {
        return L.divIcon({
        className: "leaflet-marker-label",
        html: '<span class="leaflet-marker-iconlabel" style="background: #fff; color: #000;";>'+labelText+'</span>',
        text: labelText,
    });
    }
    else { 
    return L.divIcon({
        className: "leaflet-marker-label",
        html: '<span class="leaflet-marker-iconlabel" style="background: #CB2B3E; color: #FFFFFF;";>'+labelText+'</span>',
        text: labelText,
    });}
}

createLabel(marker1, "Label 1.1",1);
createLabel(marker1, "Label 1.2", 2);
createLabel(marker2, "Label 2",1);

var show_label_zoom = 20; // zoom level threshold for showing/hiding labels
function show_hide_labels() {
    var cur_zoom = mymap.getZoom();
    if(cur_zoom < show_label_zoom && map.hasLayer(fg)) {       
        mymap.removeLayer(fg);            
    } else if(!map.hasLayer(fg) && cur_zoom >= show_label_zoom) {            
        mymap.addLayer(fg);                 
    }
}
mymap.on('zoomend', show_hide_labels);
show_hide_labels();

  </script>
</body>
</html>


#mapid{高度：350px；}
var mymap=L.map（'mapid'）.setView（[25.7741728，-80.19362]，12）；
var fg=L.featureGroup（）.addTo（mymap）；
L.tileLayer（'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}？access_token={accessToken}'{
属性：“地图数据©；贡献者，图像©”，
maxZoom:18，
id:'mapbox/light-v10'，
tileSize:512，
Zoomofset:-1，
accessToken:'pk.eyj1ijoiamftzxnyisimeioijja2xonnvzdmuwmgxpmnvtz2hegxlanfqin0.dx40peacrjv9cfqpfhgpg'
}).addTo（mymap）；
var redIcon=新的L.图标({
伊克努尔：'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-red.png',
shadowUrl:'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
iconSize:[25,41]，
iconAnchor:[12,41]，
popupAnchor:[1，-34]，
阴影大小：[41,41]
});
var marker1=L.marker（[25.777085，-80.193935]，{icon:redIcon}）.addTo（mymap）；
var marker2=L.marker（[25.759461，-80.204921]，{icon:redIcon}）.addTo（mymap）；
函数createLabel（层、文本、计数）{
//移除标签（层）；
var icon=createStaticLabelIcon（文本，计数）；
var testspan=document.createElement（“span”）；
document.body.appendChild（testspan）；
testspan.className=“textwidth”；
testspan.style.fontSize=“10px”；
testspan.innerHTML=文本；
var-width=testspan.clientWidth+11；
var-posY=0；
如果（计数=1）{
posY=-4；
}否则如果（计数=2）{
posY=-24；
}
icon.options.iconAnchor=[width/2，posY]；//标签是否居中
var label=L.marker（layer.getLatLng（），{icon:icon}）.addTo（fg）；
layer.appendedLabel=标签；
document.body.removeChild（testspan）；
}
函数createStaticLabelIcon（labelText，计数）{
如果（计数=1）{
返回L.divIcon({
类名：“传单标记标签”，
html:''+labelText+''，
文本：labelText，
});
}
否则{
返回L.divIcon({
类名：“传单标记标签”，
html:''+labelText+''，
文本：labelText，
});}
}
createLabel（标记1，“标签1.1”，1）；
createLabel（标记1，“标签1.2”，2）；
createLabel（标记2，“标记2”，1）；
var show_label_zoom=20；//显示/隐藏标签的缩放级别阈值
函数show_hide_labels（）{
var cur_zoom=mymap.getZoom（）；
如果（cur_zoom=show\u label\u zoom）{
mymap.addLayer（fg）；
}
}
mymap.on（'zoomend'，显示隐藏标签）；
显示隐藏标签（）；

不要将标签添加到地图，而是将其添加到

L.featureGroup

：

var fg = L.featureGroup().addTo(map);
...
function createLabel(layer, text, count){
   ...
   var label = L.marker(layer.getLatLng(),{icon: icon}).addTo(fg);
   ...
}

然后在缩放时删除/添加组：

function show_hide_labels() {
    var cur_zoom = mymap.getZoom();
    if(cur_zoom < show_label_zoom && mymap.hasLayer(fg)) {       
        mymap.removeLayer(fg);            
    } else if(!mymap.hasLayer(fg) && cur_zoom >= show_label_zoom) {            
        mymap.addLayer(fg);                 
    }
}
mymap.on('zoomend', show_hide_labels);
show_hide_labels();

函数show\u hide\u标签（）{
var cur_zoom=mymap.getZoom（）；
如果（cur_zoom=show\u label\u zoom）{
mymap.addLayer（fg）；
}
}
mymap.on（'zoomend'，显示隐藏标签）；
显示隐藏标签（）；

请参见我问题中的更新2。出于某种原因，这个答案还不能完全解决我的问题——标签不会随着缩放级别的变化而出现和消失。为了进一步解决问题，我将整个脚本粘贴到我的问题中。我猜我遗漏了一些小细节。错误：使用

mymap

而不是

map

mymap.hasLayer（fg）

这是我的错。2.将var

show\u label\u zoom

设置为较小的数字。您将

maxZoom

设置为18，这样您就永远不会达到20。。。使用：

var show\u label\u zoom=13

function show_hide_labels() {
    var cur_zoom = mymap.getZoom();
    if(cur_zoom < show_label_zoom && mymap.hasLayer(fg)) {       
        mymap.removeLayer(fg);            
    } else if(!mymap.hasLayer(fg) && cur_zoom >= show_label_zoom) {            
        mymap.addLayer(fg);                 
    }
}
mymap.on('zoomend', show_hide_labels);
show_hide_labels();