2 votos

¿Cómo se mueve el folleto a la ubicación de búsqueda?

He probado el control de búsqueda de folletos. La búsqueda funciona muy bien, puedo ver la lista con los nombres de mis puntos, pero cuando quiero buscar, no funciona, no se mueve al punto de búsqueda. Mis datos JSON son puntos. ` var data = us_states;

var map = new L.Map('map', {zoom: 5, center: new L.latLng([37.8, 16]) });

map.addLayer(new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png')); //base layer

var featuresLayer = new L.GeoJSON(data, {
        style: function(feature) {
            return {color: feature.properties.color };
        },
        onEachFeature: function(feature, marker) {
            marker.bindPopup('<h4 style="color:'+feature.properties.color+'">'+ feature.properties.OBJECTID +'</h4>');
        }
    });

map.addLayer(featuresLayer);

var searchControl = new L.Control.Search({
    layer: featuresLayer,
    propertyName: 'OBJECTID',
    marker: false,
    moveToLocation: function(latlng, OBJECTID, map) {

        var zoom = map.getBoundsZoom(latlng.layer.getBounds());
        map.setView(latlng, zoom); // access the zoom
    }
});

searchControl.on('search:locationfound', function(e) {

    //console.log('search:locationfound', );

    //map.removeLayer(this._markerSearch)`

2voto

Steve Gray Puntos 156

Tal vez esto ayude. Yo calculé manualmente un nivel de zoom al que quería que fuera y lo fijé en el control, después de todo es sólo un marcador. Lo haría diferente si fuera un polígono.

    var searchControl = new L.Control.Search({
    layer: bbTeam,                //layer name to search
    propertyName: 'Name',         //Search field
    marker: false,
    moveToLocation: function(latlng, title, map) {
        map.setView(latlng, 7);    // set the zoom
    }
});

0voto

Steve Gray Puntos 156

Necesitas estos dos bloques de código, lo tengo configurado si haces clic en un marcador para poner un círculo rojo en la base del marcador. Y si hace clic en otro marcador para eliminar el primer círculo.

onEachFeature: function (feature, layer) {
    layer.on('click', function (e) {
            // get coordinates from GeoJSON
            var coords = e.target.feature.geometry.coordinates
            //pass coords to function to create marker.
            onMapClick(coords)

//////////////////////////////////          

// click marker
  var clickmark;

  // When you click on a marker, it calls the onMapClick function and passes the layers coordinates.
  // I grab the coords which are X,Y, and I need to flip them to latLng for a marker, 

  function onMapClick(coords) {

        var thecoords = coords.toString().split(',');
        var lat = thecoords[1];
        var lng = thecoords[0];
        //if prior marker exists, remove it.
        if (clickmark != undefined) {
          map.removeLayer(clickmark);
        };

         clickmark = L.circleMarker([lat,lng],{
            radius: 10,
            color: "#red",
            fillColor:  "red",
            fillOpacity: 0.8}
         ).addTo(map);
    }
// end of code for click marker.

i-Ciencias.com

I-Ciencias es una comunidad de estudiantes y amantes de la ciencia en la que puedes resolver tus problemas y dudas.
Puedes consultar las preguntas de otros usuarios, hacer tus propias preguntas o resolver las de los demás.

Powered by:

X