Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/angular/26.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 使用传单缩小角度时隐藏标记_Javascript_Angular_Leaflet - Fatal编程技术网

Javascript 使用传单缩小角度时隐藏标记

Javascript 使用传单缩小角度时隐藏标记,javascript,angular,leaflet,Javascript,Angular,Leaflet,我想在缩小时隐藏标记。 我单击以在地图上添加标记,如果缩放,标记不会隐藏 如果我查看console.log,则标记未定义 ngOnInit() { var map = L.map("map").setView([this.latitude, this.longitude], this.zoom); L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", { attribution: '© &

我想在缩小时隐藏标记。 我单击以在地图上添加标记,如果缩放,标记不会隐藏

如果我查看console.log,则标记未定义

ngOnInit() {

  var map = L.map("map").setView([this.latitude, this.longitude], this.zoom);
  L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
    attribution:
      '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
  }).addTo(map);

  map.on('zoomend',function(e){
    console.log(map.getZoom());
    if (map.getZoom()>13) {
      if(this.saveLat !== undefined) {
        this.marker = L.marker([this.saveLat, this.saveLon], this.markerIcon).addTo(map);
      }
    }else {
      console.log(this.marker);
      if(this.marker !== undefined) {
        this.marker.remove();
      }
    }
  });

  map.on("click", e => {
      console.log(e.latlng); // get the coordinates
      if(this.marker !== undefined) {
        this.marker.remove()
        console.log(this.marker);
      }
      this.marker = L.marker([e.latlng.lat, e.latlng.lng], this.markerIcon).on('click', this.markerOnClick).addTo(map); // add the marker onclick
      console.log(this.marker);
      this.saveLat = e.latlng.lat;
      this.saveLon = e.latlng.lng;
      console.log(this.saveLat);
    });
}
ngOnInit(){
var map=L.map(“map”).setView([this.latitude,this.longitude],this.zoom);
L.tileLayer(“https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png”{
归属:
“©撰稿人”
}).addTo(地图);
地图上('zoomend',函数(e){
log(map.getZoom());
如果(map.getZoom()>13){
if(this.saveLat!==未定义){
this.marker=L.marker([this.saveLat,this.saveLon],this.markerIcon).addTo(map);
}
}否则{
console.log(this.marker);
if(this.marker!==未定义){
this.marker.remove();
}
}
});
map.on(“单击”,e=>{
console.log(e.latlng);//获取坐标
if(this.marker!==未定义){
this.marker.remove()
console.log(this.marker);
}
this.marker=L.marker([e.latlng.lat,e.latlng.lng],this.markerIcon).on('click',this.markerOnClick.).addTo(map);//单击后添加标记
console.log(this.marker);
this.saveLat=e.latlng.lat;
this.saveLon=e.latlng.lng;
console.log(this.saveLat);
});
}

创建一个
图层组
,在组上添加标记,并在每次地图单击时跟随地图。当您缩小时,通过调用
clearLayers
方法将它们从地图中删除

map;
layerGroup: L.LayerGroup = L.layerGroup();

ngOnInit() {
    this.map = L.map("map").setView([51.505, -0.09], 13);
    L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
      attribution:
        '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(this.map);

    this.map.on("click", (e: any) => {
      const {
        latlng: { lat, lng }
      } = e;
      const marker = L.marker([lat, lng], { icon });
      this.layerGroup.addLayer(marker).addTo(this.map);
    });

    this.map.on("zoomend", (e: Event) => {
      // clear the markers here
      this.layerGroup.clearLayers();
    });
  }
map;
layerGroup:L.layerGroup=L.layerGroup();
恩戈尼尼特(){
this.map=L.map(“map”).setView([51.505,-0.09],13);
L.tileLayer(“https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png”{
归属:
“©撰稿人”
}).addTo(此.map);
this.map.on(“单击”,(e:any)=>{
常数{
latlng:{lat,lng}
}=e;
const marker=L.marker([lat,lng],{icon});
this.layerGroup.addLayer(marker).addTo(this.map);
});
this.map.on(“zoomend”,(e:Event)=>{
//清除这里的标记
this.layerGroup.clearLayers();
});
}