Question

所以，我正在与leaftlet js一起开展一个小项目，我想知道如何才能使它成为OOP。好的，这是这笔交易：

创建一个＆＃39;类＆＃39;它适用于标记，它们来自数据库。所以，我想我会创建一个对象数组，我是对的 ???

我的第一个问题是，我是否必须创建一个自定义类，将标记对象作为此类的属性，或者从传单中扩展L.marker类？

第二个问题：如何在每个标记上绑定click事件，因此该事件可以调用和ajax请求并将弹出窗口与信息绑定。

到目前为止，这是我的代码：

<script>
    var map = L.map('map').setView([25.55246, -103.50328], 18);
    var marcas = [];

   L.tileLayer('https://{s}.tiles.mapbox.com/v3/kinopio.kikc39gj/{z}/{x}/{y}.png', {
        maxZoom: 18
    }).addTo(map);

    function Marcador(marca, usuario, seccional, identificador){
        this.marca = marca;
        this.identificador = identificador;
        this.usuario = usuario;
        this.seccional = seccional;
    }

    Marcador.prototype.verUsuario = function(){
        console.log(this.usuario);
    }

    Marcador.prototype.verVotos = function(){
        $.ajax({
            type: 'GET',
            url: '/votos/' + this.identificador,
            datatype: 'json',
            success:function(data){
                msg = $.parseJSON(data);
                //marcador.bindPopup('Votos: ' + msg[0].Votos ).openPopup();
                console.log(msg[0].Votos);
            }
        });

    }

    function onMapClick(e) {
//When clicking in the map, create a marker so i can register a new one to the DB...

        var formulario =    "<form action='/registro' id='registro' method='post'> " +
                                "<input name='usuario' placeholder='usuario'> " +
                                "<input name='password' placeholder='passwword'>" +
                                "<input name='seccional' placeholder='seccional'>" +
                                "<input name='latitud' type='hidden' value = " + e.latlng.lat  + ">" +
                                "<input name='longitud' type='hidden' value = " + e.latlng.lng + ">" +
                                "<input type='submit' value='Aceptar'>" +
                            "</form>"

        var marker = L.marker( e.latlng ).addTo( map ).bindPopup( formulario );

            marker.on("popupopen", function(){

                var forma = $('#registro');
                forma.on('submit', function(ev){
                    ev.preventDefault();

                    $.ajax({
                        type: forma.attr('method'),
                        url: forma.attr('action'),
                        data: forma.serialize(),
                        success:function(data){
                            marker.closePopup();
                            marker.bindPopup( 'Usuario registrado exitosament' ).openPopup();
                        }
                    });
                });

            });
        }

        function cargarRegistros(e){
            e.preventDefault();

            $.ajax({
                type: 'GET',
                url: '/registrados',
                datatype: 'json',

                success: function(d){

                    $.each(d.marcadores, function(i, item){                        
                        marca = new L.marker( [ parseFloat(item.latitud), parseFloat( item.longitud) ] )
                                    .addTo(map).bindPopup();
                        marcas.push( new Marcador( marca, item.usuario, item.seccional, item.identificador ) );

                    });
                }
            });

            return marcas;
        }

        map.on('click', onMapClick);

        function clickMarcador(e){
            console.log(e.target  + '---' + e.currentTarget);
            if (e.target.id !== e.currentTarget) {
                console.log('hola');
            }

            e.stopPropagation();
    }

    $('#registrados').on('click', cargarRegistros);

</script>

Thnx家伙寻求帮助......

Answer 1

我只是扩展L.Marker类以包含所需的功能，例如，click事件，你可以在标记的onAdd方法被触发时挂钩它，然后取消它onRemove方法：这是代码中的一个示例（使用jQuery中的$ .getJSON）：

L.CustomMarker = L.Marker.extend({

  onAdd: function (map) {
    this.on('click', this.clickHandler);
    L.Marker.prototype.onAdd.call(this, map);
  },

  onRemove: function (map) {
    this.off('click', this.clickHandler);
    L.Marker.prototype.onRemove.call(this, map);
  },

  clickHandler: function (e) {
    $.getJSON('data.json', function (data) {
      e.target.bindPopup(data.myProperty);
      e.target.openPopup();
    }, this);
  }

});

L.customMarker = function (latLng, options) {
  return new L.CustomMarker(latLng, options);
}

这是关于Plunker的一个工作示例：http://plnkr.co/edit/hNlvhC?p=preview

这是非常粗糙的，在一个真实的实现中，如果弹出窗口已被绑定，我会检查click事件，因此你不会将它绑定两次，但它让你很好地了解扩展的可能性L.Marker

关于存储标记，您只需使用L.LayerGroup和地图即可。创建标记时，请将其添加到组中。这样您就可以使用图层组的实用工具方法，例如hasLayer，getLayer，clearLayers，eachLayer等。

以下是L.LayerGroup：http://leafletjs.com/reference.html#layergroup

的参考

LeafletJS面向对象的最佳方法

1 个答案: