it-swarm.com.ru

Google maps v3 перетаскиваемый маркер

Я новичок в Google Maps, и я пытаюсь узнать это. 

marker = new google.maps.Marker(
{
     map:map,
     draggable:true,
     animation: google.maps.Animation.DROP,
     position: results[0].geometry.location
});

Это моя позиция маркера, когда я инициализирую позицию маркера, чем знаю название места (например: улица XY, Нью-Йорк,), но из-за перетаскиваемой опции она меняется, и мой вопрос заключается в том, как я могу получить новое название места, какой обработчик событий мне нужен. 

54
OHLÁLÁ

Наконец я нашел ответ:

marker = new google.maps.Marker(
{
    map:map,
    draggable:true,
    animation: google.maps.Animation.DROP,
    position: results[0].geometry.location
});
google.maps.event.addListener(marker, 'dragend', function() 
{
    geocodePosition(marker.getPosition());
});

function geocodePosition(pos) 
{
   geocoder = new google.maps.Geocoder();
   geocoder.geocode
    ({
        latLng: pos
    }, 
        function(results, status) 
        {
            if (status == google.maps.GeocoderStatus.OK) 
            {
                $("#mapSearchInput").val(results[0].formatted_address);
                $("#mapErrorMsg").hide(100);
            } 
            else 
            {
                $("#mapErrorMsg").html('Cannot determine address at this location.'+status).show(100);
            }
        }
    );
}
114
OHLÁLÁ

Установите позицию на карте, используя lat/lang и сделайте маркер перетаскиваемым

  • Использование lat/lang изначально устанавливает маркер в заданной точке на карте

  • Адресная переменная используется для заголовка. Это можно игнорировать.

  • draggable: true делает маркер перетаскиваемым.

  • Используйте прослушиватель событий google.maps.event.addListener (marker, 'dragend', function (marker) Для прослушивания изменений в позиции маркера

    function showMap(lat,lang,address) {
    var myLatLng = {lat: lat, lng: lang};
    
        var map = new google.maps.Map(document.getElementById('map_canvas'), {
          zoom: 17,
          center: myLatLng
        });
    
        var marker = new google.maps.Marker({
          position: myLatLng,
          map: map,
          title: address,
          draggable:true,
        });
    
        google.maps.event.addListener(marker, 'dragend', function(marker){
            var latLng = marker.latLng; 
            currentLatitude = latLng.lat();
            currentLongitude = latLng.lng();
            jQ("#latitude").val(currentLatitude);
            jQ("#longitude").val(currentLongitude);
         }); 
    }
    
18
Ahmad Vaqas Khan

Пожалуйста, следуйте ниже три шага, чтобы получить перетаскиваемый маркер с положением в текстовом поле.

  1. CSS

    <style> #map { height: 400px; width: 100%; } </style>

  2. HTML

    <div id="map"></div> Latitude <input type="text" id="la" name="latitude" value="28.39" > Longitude<input type="text" id="lo" name="longitude" value="84.12" >

  3. JavaScript

    <script> /** *Receiving the value of text box and type done conversion by Number() */ var latitude = Number(document.getElementById("la").value); var longitude = Number(document.getElementById("lo").value); function initMap() { /** *Passing the value of variable received from text box **/ var uluru = {lat: latitude, lng: longitude}; var map = new google.maps.Map(document.getElementById('map'), {zoom: 7,center: uluru} ); marker = new google.maps.Marker( { map:map, draggable:true, animation: google.maps.Animation.DROP, position: uluru } ); google.maps.event.addListener(marker, 'dragend', function(marker){ var latLng = marker.latLng; currentLatitude = latLng.lat(); currentLongitude = latLng.lng(); $("#la").val(currentLatitude); $("#lo").val(currentLongitude); } ); } </script><!--Google Map API Link--> <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOURAPIKEYHERE&callback=initMap"> </script>
    ПРИМЕЧАНИЕ: Пожалуйста, используйте Jquery во главе

0
Karma