繁体   English   中英

搜索后无法拖动标记,传单地图

[英]Unable to drag marker after search, leaflet map

搜索地址并在该位置设置标记后,我无法拖动标记。

<script>
     
    var lngg, latt,hlat,hlng;
    var marker;
    
            var map = L.map('map').setView([19.8684798, 75.3218784], 10);
           
            map.addLayer(new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png')); 
            marker = L.marker([19.8684798, 75.3218784]).addTo(map)
            .bindPopup('My location')
                        .openPopup();
           
           map.locate({setView : true});
   
           marker.dragging.enable();
          
            L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
                    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
            }).addTo(map);
        
            function theLocation(){
                if (navigator.geolocation) {
                    navigator.geolocation.getCurrentPosition(showPosition);
                } else { 
                    x = document.getElementById('notice');
                    x.innerHTML = "Geolocation is not supported by this browser.";
                }
                
            } theLocation();
     
    function showPosition(position) {
        latt = position.coords.latitude;
        lngg = position.coords.longitude;
            document.getElementById('demo').innerHTML = "Latitude: " + latt + 
            "<br>Longitude: " + lngg;
            marker.setLatLng([position.coords.latitude, position.coords.longitude]);
    }

            function setLocation(){
                position = marker.getLatLng();
                hlat = position.lat;
                hlng = position.lng;
                document.getElementById('lat').value = hlat;
                document.getElementById('lng').value = hlng;
                alert('Location is Set.');
            }

            function onMapClick(e) {

                marker.on("dragend", function(ev) {
                    var chagedPos = ev.target.getLatLng();
                    this.bindPopup("ME at " +chagedPos.toString()).openPopup();
                    loc1 = [chagedPos.lat,chagedPos.lng];
                    hlat = chagedPos.lat;
                    hlng = chagedPos.lng;
                    document.getElementById('lat').value = hlat;
                    document.getElementById('lng').value = hlng;
                    document.getElementById('demo').innerHTML = "Latitude: " + hlat + 
                    "<br>Longitude: " + hlng;
                    console.log(loc1);

            });

            }

            map.on('click', onMapClick);


            var search = new L.Control.Search({
                    url: 'https://nominatim.openstreetmap.org/search?format=json&q={s}',
                                    jsonpParam: 'json_callback',
                                    propertyName: 'display_name',
                                    propertyLoc: ['lat','lon'],
                                    marker: L.marker([0,0]),
                                    autoCollapse: true,
                                    autoType: false,
                                    textPlaceholder: ' search the location... ',
                                    minLength: 2
            });

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

                        marker.setLatLng([e.latlng.lat, e.latlng.lng]);
                        latt = e.latlng.lat;
                        lngg = e.latlng.lng;
                        document.getElementById('demo').innerHTML = "Latitude: " + latt + "<br>Longitude: " + lngg;
            });
                       
            
            map.addControl(search);


</script>

我还尝试再次启用拖动即marker.dragging.enable(); 在 ** search.on() ** 通过 ** setLatLng() ** 设置标记位置后,但仍然无法正常工作。

当我搜索地址时,标记位置设置为该位置,但随后我无法拖动该标记。

当我搜索地址时,标记位置设置为该位置,但随后我无法拖动该标记。

在这种情况下,实际上在同一位置有 2 个标记。 一个由库创建(不可拖动),另一个是您的(可拖动),第一个标记完全覆盖您的标记。 您只需要通过替换来禁用第一个标记

marker: L.marker([0,0]),

marker: false,

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM