javascript - 当用户登陆页面时，如何调整此代码以按地理位置填充地址

Question

当用户接受地理位置时，我希望填充我的地址字段。然后使用搜索地址作为替代？目前，自动完成工作正常并填充了我需要的所有字段。

我如何/是否可以调整此 JS 以通过地理位置填充字段。

var map;
var service;
var infowindow;
var pos;
var currentLocation;
var placeSearch, autocomplete;
var place;

//The variables you want to recieve from Google
//when the address is selected
var componentForm = {
    street_number: 'long_name',
    route: 'long_name',
    administrative_area_level_2: 'long_name',
    postal_town: 'long_name',
    country: 'long_name',
    postal_code: 'short_name'
};

function initMap() {

    infowindow = new google.maps.InfoWindow();
    //Finds your current location and displays it on the map
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(
            function(position) {
                pos = {
                    lat: position.coords.latitude,
                    lng: position.coords.longitude
                };
                currentLocation = new google.maps.LatLng(pos.lat, pos.lng);
                map = new google.maps.Map(document.getElementById("map"), {
                    center: currentLocation,
                    zoom: 15
                });
             

            },
            function() {
                handleLocationError(true, infoWindow, map.getCenter());
            }

        );
    } else {
        // Browser doesn't support Geolocation
        handleLocationError(false, infoWindow, map.getCenter());
    }
//Calls function that autocompletes form
    initAutocomplete();
}

function handleLocationError(browserHasGeolocation, infoWindow, pos) {
    infoWindow.setPosition(pos);
    infoWindow.setContent(
        browserHasGeolocation
            ? "Error: The Geolocation service failed."
            : "Error: Your browser doesn't support geolocation."
    );
    infoWindow.open(map);
}

function initAutocomplete() {
    // Create the autocomplete object, restricting the search predictions to
    // geographical location types.
    autocomplete = new google.maps.places.Autocomplete(
        document.getElementById('autocomplete'), {types: ['geocode']});

    // Avoid paying for data that you don't need by restricting the set of
    // place fields that are returned to just the address components.
    autocomplete.setFields(['address_component', 'geometry']);


    // When the user selects an address from the drop-down, populate the
    // address fields in the form.
    autocomplete.addListener('place_changed', fillInAddress);
}

function fillInAddress() {
    // Get the place details from the autocomplete object.
    place = autocomplete.getPlace();

    for (var component in componentForm) {
        document.getElementById(component).value = '';
        document.getElementById(component).disabled = false;
    }

    // Get each component of the address from the place details,
    // and then fill-in the corresponding field on the form.
    for (var i = 0; i < place.address_components.length; i++) {
        var addressType = place.address_components[i].types[0];
        if (componentForm[addressType]) {
            var val = place.address_components[i][componentForm[addressType]];
            document.getElementById(addressType).value = val;
        }
    }

    lat = place.geometry.location.lat();
    lng = place.geometry.location.lng();
    document.getElementById('address_latitude').value = lat;
    document.getElementById('address_longitude').value = lng;

    //Map zooms in to the location given
    var map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: +lat, lng: +lng},
        zoom: 15
    });

    //Map marker is created and displays address
    var marker = new google.maps.Marker({
        map: map,
        position: {lat: +lat, lng: +lng}
    });
    google.maps.event.addListener(marker, "click", function() {
        infowindow.setContent(document.getElementById('autocomplete').value);
        infowindow.open(map, this);
    });
}

// Bias the autocomplete object to the user's geographical location,
// as supplied by the browser's 'navigator.geolocation' object.
function geolocate() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
            var geolocation = {
                lat: position.coords.latitude,
                lng: position.coords.longitude
            };
            var circle = new google.maps.Circle(
                {center: geolocation, radius: position.coords.accuracy});
            autocomplete.setBounds(circle.getBounds());
        });
    }
}

标签： javascriptgoogle-maps

Answer 1

因此，经过大量试验和错误后，我可以使用以下解决方案：

function geocodeLatLng(geocoder, map, infowindow, lat, lng) {

    var latitude = lat;
    var longitude = lng;
    const latlng = {
        lat: latitude,
        lng: longitude
    };
    geocoder.geocode({ location: latlng }, (results, status) => {
        if (status === "OK") {
        if (results[0]) {
            map.setZoom(11);
            const marker = new google.maps.Marker({
                position: latlng,
                map: map
            });
            infowindow.setContent(results[0].formatted_address);
            infowindow.open(map, marker);
            for (var i = 0; i < results[0].address_components.length; i++) {
                var addressType = results[0].address_components[i].types[0];
                if (componentForm[addressType]) {
                    var val = results[0].address_components[i][componentForm[addressType]];
                    document.getElementById(addressType).value = val;
                }
            }

        } else {
            window.alert("No results found");
        }
    } else {
        window.alert("Geocoder failed due to: " + status);
    }
});
}

然后我添加到initMap

const geocoder = new google.maps.Geocoder();
                const infowindow = new google.maps.InfoWindow();
                geocodeLatLng(geocoder, map, infowindow, lat, lng);

这可能不是最好的解决方案，但它确实有效。