How to build Leaflet control located with marker draggable(update lat/long when drag) & auto update-CodePudding

I had the existing code which already built with located control and auto update lat/long in value web form(see attached) Now I want to add a draggable maker when my location is detected and auto update the lat/long when maker pin point changed focus on located control function. My search control function work as expected, it was using markerz as maker.

Here was my existing code:

<script type="text/javascript">
var mymap = L.map(\'dvMap\').setView(['. $pin_lat . ', ' . $pin_long . '],13);
L.tileLayer(\'https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}{r}.png\',{maxZoom: 18,attribution: \'\'}).addTo(mymap);
var markerz = L.marker([' . $pin_lat . ', ' . $pin_long . '],{draggable:
true}).addTo(mymap);
var searchControl   =   new L.Control.Search({url:
\'//nominatim.openstreetmap.org/search?format=json&q={s}\',jsonpParam:
\'json_callback\',
propertyName: \'display_name\',propertyLoc:
[\'lat\',\'lon\'],marker: markerz,autoCollapse: true,autoType:
true,minLength: 2,});
searchControl.on(\'search:locationfound\', function(obj) {      
    var lt  =   obj.latlng   \'\';
    var res = lt.split("LatLng(" );
    res = res[1].split( ")" );
    res = res[0].split( ","
);
document.getElementById(\'map_lat\').value = res[0];
document.getElementById(\'map_long\').value = res[1];
});

mymap.addControl( searchControl );
markerz.on(\'dragend\', function (e) {
        document.getElementById(\'map_lat\').value =
        markerz.getLatLng().lat;
        document.getElementById(\'map_long\').value =
        markerz.getLatLng().lng;
});
L.control.locate({
strings: {
    title: "Show me where I am!"
}
}).addTo(map);map.on(\'locationfound\',(e)=>{
console.log(e);
document.getElementById(\'map_lat\').value = e.latlng.lat;
document.getElementById(\'map_long\').value = e.latlng.lng;
});
</script>

CodePudding user response：

You need to call setLatLng() on the marker:

map.on(\'locationfound\',(e)=>{
    console.log(e);
    markerz.setLatLng(e.latlng);
    document.getElementById(\'map_lat\').value = e.latlng.lat;
    document.getElementById(\'map_long\').value = e.latlng.lng;
});