时间戳

首页 > 解决方案 > 打开地图上可见的所有标记的弹出窗口，缩放 > 10

popup - 打开地图上可见的所有标记的弹出窗口，缩放 > 10

问题描述

我需要在 Zoom, 10 处打开地图上可见的所有标记。我还使用 Leaflet.markercluster。

初始化地图：

initMap() {
  this.map = L.map('map', {
    center: [55.55, 37.61],
    zoom: 9,
    layers: this.layer
  })
  this.tileLayer = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 18,
    attribution:
      '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, &copy;'
  })
  this.tileLayer.addTo(this.map)

this.map.on('zoom', function(ev) {
    ???
  })

添加标记层：

this.markerLayer = new L.LayerGroup()   // layer contain searched elements
  // this.map.addLayer(this.markerLayer)

  for (const i in data) {
...
    const marker = new L.Marker(new L.latLng(loc), { title: title, icon: icon })// se property searched
    marker.bindPopup(title)
    this.markerLayer.addLayer(marker)
  }

使用传单标记集群：

this.markersLayer = L.markerClusterGroup({
    iconCreateFunction: function(cluster) { ... },
    singleMarkerMode: false
  })
  this.markersLayer.addLayer(this.markerLayer)
  this.map.addLayer(this.markersLayer)

标签： popupleafletzoomingmarkerleaflet.markercluster

解决方案

You should add your markers to an array before / after adding them to the map to access them easily.

var markers = [];

for (const i in data) {
    const marker = new L.Marker(new L.latLng(loc), { title: title, icon: icon })
    marker.bindPopup(title)
    this.markerLayer.addLayer(marker)
    markers.push(marker);
}

after that you can just loop through your markers array and use openPopUp function of marker to open popups of your markers programmatically.

for(i = 0; i< markers.length;i++){
    markers[i].openPopup();
}

推荐阅读