Ist es möglich, den Breiten- und Längengrad eines ziehbaren Markers in einer Karte (mit Javascript) in ein Formular in HTML zu bekommen?

Question

Nov 26, 2014, 07:17 PM

latitude-longitude google-maps google-geocoder

Ist es möglich, den Breiten- und Längengrad eines ziehbaren Markers in einer Karte (mit Javascript) in ein Formular in HTML zu bekommen?

Ich versuche, die Breite und Länge einer ziehbaren Markierung in Google Maps zu ermitteln. Ich benötige diese Werte, um direkt in das value-Attribut in einem @ zu gelange<input type="text">. Ich habe das geschafft, das einzige Problem ist, dass ich nicht weiß, wie man einen Geocoder hinzufügt, damit der Benutzer seine eigene Adresse eingeben und Lat und Lng abrufen kann, aber sie müssen auch Albe sein, um den Marker hineinzuziehen Fall Google Maps ist nicht korrekt. Ich werde meinen Code hier ablegen. Schätze, wenn jemand helfen könnte.

HTML

<!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script> </head> <body> <input type="text" id="latitude" placeholder="latitude"> <input type="text" id="longitude" placeholder="longitude"> <div id="map" style="width:500px; height:500px"></div> <p><input class="postcode" id="Postcode" name="Postcode" type="text"> <input type="submit" id="findbutton" value="Find" /></p> </body> </html>

JavaScript

        function initialize() {
        var $latitude = document.getElementById('latitude');
        var $longitude = document.getElementById('longitude');
        var latitude = 50.715591133433854
        var longitude = -3.53485107421875;
        var zoom = 16;
        var geocoder;

        var LatLng = new google.maps.LatLng(latitude, longitude);

        var mapOptions = {
            zoom: zoom,
            center: LatLng,
            panControl: false,
            zoomControl: false,
            scaleControl: true,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }   

        var map = new google.maps.Map(document.getElementById('map'),mapOptions);

        geocoder = new google.maps.Geocoder();  

        var marker = new google.maps.Marker({
            position: LatLng,
            map: map,
            title: 'Drag Me!',
            draggable: true
        });

        google.maps.event.addListener(marker, 'dragend', function(marker){
            var latLng = marker.latLng;
            $latitude.value = latLng.lat();
            $longitude.value = latLng.lng();
        });


    }
    $(document).ready(function () {

        initialize();

        $('#findbutton').click(function (e) {
            var address = $(PostCodeid).val();
            geocoder.geocode({ 'address': address }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    map.setCenter(results[0].geometry.location);
                    marker.setPosition(results[0].geometry.location);
                    $(latitude).val(marker.getPosition().lat());
                    $(longitude).val(marker.getPosition().lng());
                } else {
                    alert("Geocode was not successful for the following reason: " + status);
                }
            });
            e.preventDefault();
        });
    });