【问题标题】:Remove Specific Marker on Leaflet is not A Function删除传单上的特定标记不是功能
【发布时间】:2016-12-22 04:58:23
【问题描述】:

我根据 Leaflet 和 OSM 制作了一张地图,并为每个标记创建了弹出窗口,其中包含一个用于删除相应标记的按钮,但它只是不起作用。我已经尝试使用地图、图层和标记属性删除特征和删除标记函数,但它们中的每一个都返回它不是函数。任何帮助表示赞赏。

这是我的代码:

<script type="text/javascript">
    var count = 0; 
    var map, layer, marker = [];

    function selesai(){
        alert(count);
        marker[count].removeMarker();
        location.reload();
        $.ajax({
            url: "{{url('mapdata')}}/"+count,
            data: {},
            dataType: 'json',
            type:'get',
            success:function(data) {
                initMap2(data);
            }
        });
    }

    function initMap(data){
        var locations = data;

        map = L.map( 'osmap_page', {
            center: [locations[locations.length-1][2], locations[locations.length-1][3]],
            zoom: 18
        });

        layer = L.tileLayer( 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
            subdomains: ['a','b','c']
        }).addTo( map );

        for ( var i=0; i < locations.length; i++) {

            if (locations[i][0] == 'panic') {
                var icon = L.icon({iconUrl:"{{asset('assets/splash4.gif')}}", iconAnchor: new L.Point(36,41), popupAnchor: new L.Point(-5, -45) });

                marker[i] = L.marker( [locations[i][2], locations[i][3]], {icon: icon});
                marker[i].bindPopup('<div id="content">'+
        '<h3 style="color:red; text-align:center;">Panic</h3>'+
        '<div id="bodyContent">'+
        '<p> Nama : ' + locations[i][5] + " <br> Email : " + locations[i][6] + " <br> Nomor HP : " + locations[i][7] + " <br><br> Lokasi : " + locations[i][4] + " <br> Waktu : " + locations[i][1]+ '</p>'+
        '</div>'+ '<button type="button" class="btn btn-warning btn-xs" onclick="proses()">Proses</button>'+ '<div class=pull-right><button type="button" class="btn btn-success btn-xs" onclick="selesai()">Selesai</button></div>'+
        '</div>').addTo( map );

                if(i == locations.length - 1){
                    count = i;
                    map.setView(new L.LatLng(locations[i][2], locations[i][3]), 18);
                    marker[i].bindPopup('<div id="content">'+
        '<h3 style="color:red; text-align:center;">Panic</h3>'+
        '<div id="bodyContent">'+
        '<p> Nama : ' + locations[i][5] + " <br> Email : " + locations[i][6] + " <br> Nomor HP : " + locations[i][7] + " <br><br> Lokasi : " + locations[i][4] + " <br> Waktu : " + locations[i][1]+ '</p>'+
        '</div>'+ '<button type="button" class="btn btn-warning btn-xs" onclick="proses()">Proses</button>'+ '<div class=pull-right><button type="button" class="btn btn-success btn-xs" onclick="selesai()">Selesai</button></div>'+
        '</div>').openPopup().addTo( map );
                }

            } else {
                var icon2 = L.icon({iconUrl:"{{asset('assets/opmarkerblue2.png')}}", iconAnchor: new L.Point(0,40), popupAnchor: new L.Point(10, -36)});
                marker[i] = L.marker( [locations[i][2], locations[i][3]], {icon: icon2});

                marker[i].bindPopup('<div id="content">'+
        '<h3 style="color:blue; text-align:center;">Peristiwa</h3>'+
        '<div id="bodyContent">'+
        '<p> Nama : ' + locations[i][5] + " <br> Email : " + locations[i][6] + " <br> Nomor HP : " + locations[i][7] + " <br><br> Lokasi : " + locations[i][4] + " <br> Waktu : " + locations[i][1]+ '</p>'+
        '</div>'+ '<button type="button" class="btn btn-warning btn-xs" onclick="proses()">Proses</button>'+ '<div class=pull-right><button type="button" class="btn btn-success btn-xs" onclick="selesai()">Selesai</button></div>'+
        '</div>').addTo( map );

                if(i == locations.length - 1){
                    count = i;
                    map.setView(new L.LatLng(locations[i][2], locations[i][3]), 18);
                    marker[i].bindPopup('<div id="content">'+
        '<h3 style="color:blue; text-align:center;">Peristiwa</h3>'+
        '<div id="bodyContent">'+
        '<p> Nama : ' + locations[i][5] + " <br> Email : " + locations[i][6] + " <br> Nomor HP : " + locations[i][7] + " <br><br> Lokasi : " + locations[i][4] + " <br> Waktu : " + locations[i][1]+ '</p>'+
        '</div>'+ '<button type="button" class="btn btn-warning btn-xs" onclick="proses()">Proses</button>'+ '<div class=pull-right><button type="button" class="btn btn-success btn-xs" onclick="selesai()">Selesai</button></div>'+
        '</div>').openPopup().addTo( map );
                }
            }
        }
        $("#start").click(function() {
            timer = setInterval(fetch2, 3000); 
        });

        $("#stop").click(function() {
            if(timer){
                clearInterval(timer);
                timer = null
            }
        });
    }

</script>

请记住,问题源于包含删除标记的函数 selesai,但这不是函数错误。 Selesai 本身通过单击标记弹出窗口中的 Selesai 按钮触发。

【问题讨论】:

  • 您可以创建fiddle吗?
  • 我不确定 "marker[count]" 是否会为您提供所需的标记...解决此问题后,map.removeLayer(marker) 应该可以工作。或者只是创建一个小提琴,以便我们可以更轻松地调试您的代码

标签: javascript leaflet openstreetmap marker


【解决方案1】:

我已经得到了答案,在修补了可能性之后,答案很简单:

map.removeLayer(marker[count]);

我需要将其定义为 marker[count] 以指定我应该删除哪个标记。干杯。

【讨论】:

    猜你喜欢
    • 2020-06-19
    • 1970-01-01
    • 2023-02-20
    • 1970-01-01
    • 2018-07-02
    • 2022-07-06
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多