javascript - 页面上的传单加载所有标记的打开弹出窗口

Question

我正在使用 leaflet.js 版本 0.7.7 和 leaflet-realtime - v1.3.0 实现实时标记。它工作正常。但在 map 加载时，我需要为所有标记打开弹出窗口。我使用了 .openPopup() 和 openOn() 但不适合我。

我的 fiddle 是: https://jsfiddle.net/chk1/hmyxb6ur/

 var map = L.map('map').setView([48.517,18.255], 5);

    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

    var shipLayer = L.layerGroup();
    var ships = L.icon({
        iconUrl: 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/97/Emoji_u1f6a2.svg/30px-Emoji_u1f6a2.svg.png',
        iconSize: [30, 30]
    });

    var realtime = L.realtime(
        /*
        I'm providing a function to simulate a GeoJSON service,
        instead of an URL

        {
        url: 'jsonServlet/ships.json',
        crossOrigin: true,
        type: 'json' 
        }*/
      function(success, error){
        var ship = mockShip();
        success(ship);
      }, {
        interval: 5 * 1000,
        getFeatureId: function(featureData){
          return featureData.properties.mmsi;
        },
        pointToLayer: function (feature, latlng) {
          marker = L.marker(latlng, {icon: ships});
          marker.bindPopup('mmsi: ' + feature.properties.mmsi +
                           '<br/> course:' + feature.properties.hdg+
                           '<br/> speed:' + feature.properties.sog);
          marker.addTo(shipLayer);
          return marker;
        }

    }).addTo(map);
    //controlLayers.addOverlay(geojson, 'Ships');

    realtime.on('update', function() {
        map.fitBounds(realtime.getBounds(), {maxZoom: 5});
    });

    function mockShip() {
      return {
        "type": "FeatureCollection",
        "crs": {
          "type": "name",
          "properties": {
            "name": "urn:ogc:def:crs:OGC:1.3:CRS84"
          }
        },
        "features": [
          {
            "geometry": {
              "coordinates": [
                48.517+Math.sin((new Date).getTime())*2,
                18.255
              ],
              "type": "Point"
            },
            "type": "Feature",
            "properties": {
              "geometry/coordinates/longitude": "48.517708",
              "geometry/type": "Point",
              "mmsi": "512131345",
              "geometry/coordinates/latitude": "18.255447",
              "hdg": "108",
              "cog": "108",
              "sog": "30.0",
              "type": "Feature"
            }
          },
          {
            "geometry": {
              "coordinates": [
                48.415,
                18.151+Math.sin((new Date).getTime())*2
              ],
              "type": "Point"
            },
            "type": "Feature",
            "properties": {
              "geometry/coordinates/longitude": "48.417708",
              "geometry/type": "Point",
              "mmsi": "612131346",
              "geometry/coordinates/latitude": "18.155447",
              "hdg": "108",
              "cog": "108",
              "sog": "30.0",
              "type": "Feature"
            }
          }
        ]
      };
    }

Answer 1

我将引用 Leaflet API documentation :

Use Map#openPopup to open popups while making sure that only one popup is open at one time (recommended for usability), or use Map#addLayer to open as many as you want.