You are not logged in.

#1 2020-09-21 18:45:13

marcosxp
Member
Registered: 2018-03-08
Posts: 4

Arrastar Marcador mesmo achando o endereço

Estou modificando um exemplo que achei para poder localizar um endereço, ou arrastar o marcador para um determinado local e me retornar os dados necessários.

Ate ai tudo bem, esta funcionando a função de arrastar, e a função de buscar, porem quando eu busco um endereço, o marcador fica fixo, eu queria que pudesse arrasta-lo também, que e a mesma função que da quando carrega o mapa.


Segue o link de demostração
https://piicus.com/map_end.php


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Add a geocoder</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="assets/vendor/jquery/jquery-2.2.4.min.js" type="text/javascript"></script>
<script src="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel="stylesheet" />
<style>
	body { margin: 0; padding: 0; }
	#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.5.1/mapbox-gl-geocoder.min.js"></script>
<link
    rel="stylesheet"
    href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.5.1/mapbox-gl-geocoder.css"
    type="text/css"
/>
<!-- Promise polyfill script required to use Mapbox GL Geocoder in IE 11 -->
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.min.js"></script>
<div id="map"></div>

<script>
	mapboxgl.accessToken = 'pk.eyJ1IjoibWFyY29zeHAiLCJhIjoiY2pjYzVrNjJnMWR6aTJ6bzV1MDM2OHFwMiJ9.5nxBF6nmFePPafH8reHnqw';
    var map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/streets-v11',
        center: [-44.0318203, -19.9435687],
        zoom: 13
    });

    map.addControl(
        new MapboxGeocoder({
            accessToken: mapboxgl.accessToken,
            mapboxgl: mapboxgl
        })
    );
    
      var marker = new mapboxgl.Marker({
        draggable: true
    })
        .setLngLat([-44.0318203, -19.9435687])
        .addTo(map);

    function onDragEnd() {
        var lngLat = marker.getLngLat();
 var benchmarkName = location.hash.substr(1);
    console.log(lngLat.lng + ' | ' + lngLat.lat + ' | ' + benchmarkName);
    
    
  $.getJSON( "https://nominatim.openstreetmap.org/reverse.php?format=json&lat="+lngLat.lat+"&lon="+lngLat.lng, function( json ) {
  //console.log( json.display_name );
  //console.log( json.address );
  
  console.log( json.address.road );
  console.log( json.address.city );
  console.log( json.address.country );
  console.log( json.address.suburb );
    

 });


    
    }

    marker.on('dragend', onDragEnd);
    
</script>

</body>
</html>

Offline

#2 2020-09-25 12:10:28

Suburbanno
Member
Registered: 2020-09-11
Posts: 3

Re: Arrastar Marcador mesmo achando o endereço

Acho que o Leaflet te ajuda nisso
https://leafletjs.com/

Offline

#3 2020-09-27 03:47:55

santamariense
Moderator
Registered: 2015-08-26
Posts: 117

Re: Arrastar Marcador mesmo achando o endereço

Fiz uma pesquisa de um endereço em minha cidade. Ele criou um novo marcador e apontou onde está localizado o endereço, porém manteve o marcado antigo no mesmo local.
OBS.: Só é encontrado endereços que estiverem cadastrados no OSM.

Offline

Board footer

Powered by FluxBB