LeafletJS,无法将弹出窗口绑定到第二个标记

时间:2017-05-15 13:47:13

标签: javascript dictionary geolocation leaflet marker

在使用LeafletJS时,我无法将弹出窗口绑定到第二个标记,第一个标记工作得很好,任何帮助?这是我的javascript代码:

        var map = L.map('mapScene', {
                zoomControl: false,
        attributionControl: false,
    }).fitWorld();

    var playerIcon = L.icon({
        iconUrl: 'img/playermarker.png',
        shadowUrl: 'img/marker-shadow.png',

        iconSize: [25, 41],
        iconAnchor: [12, 41],
        popupAnchor: [1, -34],
        shadowSize: [41, 41]
    });

        var itemsIcon = L.icon({
        iconUrl: 'img/crate.png',
        shadowUrl: 'img/marker-shadow.png',

        iconSize:     [45, 46], // size of the icon
        shadowSize:   [50, 64], // size of the shadow
        iconAnchor:   [22, 94], // point of the icon which will correspond to marker's location
        shadowAnchor: [10, 117],  // the same for the shadow
            popupAnchor: [1, -34],
    });



    L.tileLayer('http://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.{ext}', {
        minZoom: 14,
        maxZoom: 14,
        attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
        subdomains: 'abcd',
        ext: 'png'
    }).addTo(map);


   var playerMarker;

    function onLocationFound(e) {
        var radius = e.accuracy / 2;


       playerMarker = L.marker(e.latlng, {
            icon: playerIcon
        }).addTo(map).bindPopup("Hey i'm you!");

                addMarkers();
    }

        function addMarkers(){
            alert();

            L.marker(playerMarker + 2, {
                    icon: itemsIcon
            }).addTo(map).bindPopup("").on('popupopen', function() {
            alert();
            });
        }


    function onLocationError(e) {
        alert(e.message);
    }

    map.on('locationfound', onLocationFound);
    map.on('locationerror', onLocationError);

    map.locate({
        setView: true,
        maxZoom: 16
    });

通过“addMarkers()”函数添加的第二个标记显示完全正常,但.bindpopup根本不起作用。您可以单击标记但不显示任何内容,警报也不会显示。

1 个答案:

答案 0 :(得分:2)

谢谢@ghybs的小提琴。这是一个working fiddle。 我不知道你怎么认为它可以用playerMarker + 2作为latLng,但似乎是错误的。标记和整数之间的加法不起作用。

[编辑]以下是有趣的代码:

function onLocationFound(e) {
    var radius = e.accuracy / 2;
    playerMarker = L.marker(e.latlng).addTo(map).bindPopup("Hey i'm the first marker ");

    addMarkers();
}

function addMarkers() {
  //alert();
  var ll = playerMarker.getLatLng();
  var ll2 = L.latLng(ll.lat+12, ll.lng+12);
  var mm = L.marker(ll2).addTo(map);
  mm.bindPopup("Hey i'm the second marker");
}